时间戳

首页 > 解决方案 > Angular 中的 mat-list 不显示任何名称

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

问题描述

我有一个组件可以生成一个列表，其中包含数组中某些值的名称。问题是：列表不显示任何内容，即使数组中有 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>

标签： angularangular-material

解决方案

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

  1. keyValuePipe当结果已经是一个数组时，为什么需要 a ？KeyValuePipe当我们想要迭代一个对象或地图时应该使用它。
  2. 由于您使用keyValuePipeangular 会将您的数组转换为键，键的值是数组索引，值是该索引处数组中的值。这不是必需的。
  3. 使用时keyValuePipe，我们需要访问数据为evento.key或evento.value。{{evento.descrizione}}这可能是未定义且屏幕上未显示任何内容的原因。

所以只需删除表达式KeyValuePipe中的。ngFor它应该工作。

推荐阅读