如何在Angular/Ionic中实现基于指定键数组的通用列表？

问题核心有两个：

1. 属性访问语法错误：模板中{{value.columnName}}是尝试访问对象的columnName字面量属性，而非变量columnName对应的动态键值，必须改用方括号语法{{value[columnName]}}。
2. 拼写错误：代码中循环的数组名写成了tableDescripton（少了一个i），应该和定义的数组名tableDescription保持一致。

修正后的完整代码示例 #

<ion-item id="list-value" button *ngFor="let value of tableInformation">
  <div *ngFor="let columnName of tableDescription">
    <ion-col size="1.8" offset="0" class="tableStructure">
      <ion-label>{{value[columnName]}}</ion-label>
    </ion-col>
  </div>
</ion-item>

额外注意事项 #

• 确保tableInformation和tableDescription在组件类中已正确初始化，且数据已通过Get请求加载完成，可在父容器添加*ngIf="tableInformation && tableDescription"避免空值渲染问题。
• 如果tableInformation是异步获取的Observable数据，建议用async管道处理，示例：

  <ion-item id="list-value" button *ngFor="let value of tableInformation | async">
    <!-- 内部循环代码不变 -->
  </ion-item>
  

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