Angular框架下mat-list组件无法渲染显示数组对应名称问题

你的代码问题出在*ngFor遍历逻辑中错误使用了keyvalue管道：

• keyvalue管道是用于遍历对象键值对的工具，遍历返回的每一项结构为{key: 键名, value: 键值}
• 你当前遍历的results本身就是EventoServer类型的数组，不需要额外加keyvalue管道。加了管道后你拿到的evento是「数组索引+数组元素」组成的键值对对象，无法直接读取descrizione属性，所以列表无内容显示。

修复方案 #

方案1（推荐）：直接移除keyvalue管道 #

数组原生支持*ngFor直接遍历，修改HTML模板代码即可：

<div class="row d-flex justify-content-center">
  <mat-list>
    <mat-list-item *ngFor="let evento of results">
      {{evento.descrizione}}
    </mat-list-item>
  </mat-list>
</div>

方案2：保留keyvalue管道时调整取值逻辑 #

如果有特殊场景需要保留管道，从返回的value属性中读取实际的EventoServer对象：

<mat-list-item *ngFor="let evento of results | keyvalue">
  {{evento.value.descrizione}}
</mat-list-item>

内容的提问来源于stack exchange，提问作者Lorenzo Bertolaccini