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

Question

我试图在 *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'

我该如何解决这个问题？

Answer 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>

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

Can't bind to '*ngFor' since it isn't a known property of 'div'

angular

filter

data-binding

pipe

ngfor

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

Can't bind to '*ngFor' since it isn't a known property of 'div'

angular

filter

data-binding

pipe

ngfor

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