如何在Angular中动态遍历星期数组生成带日期与任务的表单

问题原因 #

你当前代码硬编码访问SUN属性，但数组中每个对象的键是动态的（分别为SUN、MON等），只有第一个对象存在SUN属性，后续对象访问SUN会返回undefined，因此仅展示1条结果。

解决方案 #

首先需要在对应组件的.ts文件中暴露Object全局对象，方便模板中调用相关方法：

// 组件类中添加如下代码
public readonly Object = Object;

然后调整模板代码如下，即可动态读取每个星期的配置信息：

<div *ngFor="let item of form">
  <ng-container *ngFor="let dayInfo of Object.values(item)">
    {{ dayInfo.name | titlecase }} : {{ dayInfo.task.join(' ') }}
  </ng-container>
</div>

如果你的数组实际变量名为workingHourForm，把上述代码中的form替换为实际变量名即可；如果task数组存储的是对象而非字符串，自行调整join前的取值逻辑即可。

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