代码之家  ›  专栏  ›  技术社区  ›  Lorenzo Bertolaccini

ANgular:NgFor中的mat列表仅支持绑定到Iterables(如数组)

  •  0
  • Lorenzo Bertolaccini  · 技术社区  · 4 年前

    TS:

    export class ListaEventiComponent implements OnInit {
      results:EventoServer[] = []
      constructor(  public dialogRef: MatDialogRef<ListaEventiComponent>,
        @Inject(MAT_DIALOG_DATA) public data:EventoServer[] ) {
          this.results = data
          console.log(this.results)
         }
    
      ngOnInit(): void {
      }
    
    }
    

    <div class="row d-flex justify-content-center">
      <mat-list>
        <mat-list-item *ngFor="let evento of results | keyvalue">
          {{evento.descrizione}}
        </mat-list-item>
      </mat-list>
      </div>
    
    0 回复  |  直到 4 年前
        1
  •  0
  •   saivishnu tammineni    4 年前

    我在这里看到许多问题。

    1. 你为什么需要一份工作 keyValuePipe 当结果已经是数组时? KeyValuePipe 应该在我们想要迭代对象或贴图时使用。
    2. 自从你使用 键值管 angular将数组转换为键,键为数组索引,值为该索引处数组中的值。这不是必需的。
    3. 使用时 ,我们需要按以下方式访问数据: evento.key evento.value . 这可能就是原因 {{evento.descrizione}} 未定义,屏幕上不显示任何内容。

    所以只需移除 ngFor 表示它应该会起作用。

    推荐文章