無法綁定到“*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>