Angular中的mat-list不显示任何名称

Question

我有一个组件，它生成一个列表，其中包含数组中某些值的名称。问题是:即使数组中有20个值，列表也不会显示任何内容。

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 {
  }

}

HTML：

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

Answer 1

我在这里看到了多个问题。

1. 当结果已经是数组时，为什么还需要键值?当我们想要迭代对象或映射时，应该使用keyValuePipe。由于您使用了keyValuePipe angular，所以
2. 会将数组转换为键，键值是数组索引，值是数组中在该索引处的值。这不是必需的。
3. 使用keyValuePipe时，我们需要以evento.key或evento.value的形式访问数据。这可能是{{evento.descrizione}}未定义且屏幕上未显示任何内容的原因。

所以只需删除ngFor表达式中的KeyValuePipe即可。应该能行得通。