无法绑定到“*ngFor”，因为它不是“div”的已知属性答案

【问题标题】：Can't bind to '*ngFor' since it isn't a known property of 'div'无法绑定到“*ngFor”，因为它不是“div”的已知属性
【发布时间】：2020-10-24 19:53:26
【问题描述】：

我试图在*ngFor 中绑定filter 的值。但它没有正常工作。如何将数据绑定到ngFor？
源码如下，

在.ts 文件中，

menuIcons:any[];
public pageName:any = "projects";

this.menuIcons=[{
            'id':'0',
            'name':'',
            'cat':'default'
          },
          {
            'id':'1',
            'name':'apps',
            'cat':'projects'
          }];

我在.html 文件中尝试了以下代码，

第一次尝试 --> filter:'{{pageName}}'

<div class="Container" style="position:relative" *ngFor="let icon of menuIcons | filter:'{{pageName}}' ">
 <button mat-button  class="user-button" >                 
 <mat-icon class="s-28">{{icon.name}}</mat-icon>
 </button>
</div>

第二次尝试 --> filter:'${pageName}'

<div class="Container" style="position:relative" *ngFor="let icon of menuIcons | filter:'${PageName}' ">
 <button mat-button  class="user-button" >                 
 <mat-icon class="s-28">{{icon.name}}</mat-icon>
 </button>
</div>

vs 代码显示错误为Can't bind to '*ngFor' since it isn't a known property of 'div'

我该如何解决这个问题？

【问题讨论】：

标签： angular filter data-binding pipe ngfor

【解决方案1】：

你有没有尝试过这样的事情：

<div class="Container" style="position:relative" 
  *ngFor="let icon of menuIcons | filter:PageName">
  <button mat-button  class="user-button" >                 
  <mat-icon class="s-28">{{icon.name}}</mat-icon>
 </button>
</div>

【讨论】：