如何在Angular的ngFor中动态设置ngModel子属性？

你的错误源于模板中使用了错误的属性访问语法，方括号前的多余点导致Angular无法正确解析动态属性。以下是具体修正方案：

1. 修正模板语法 #

将模板里的openingHoursObj.[weekday].isOpen改为方括号直接访问属性的形式，去掉方括号前的点：

<div *ngFor="let weekday of weekdays">
  <mat-slide-toggle [(ngModel)]="openingHoursObj[weekday].isOpen">Open</mat-slide-toggle>
</div>

2. 确保TypeScript类型兼容 #

如果使用TypeScript，需保证OpeningHoursViewModel类型支持通过字符串键访问子属性，两种可选方式：

• 方式一：索引签名（适用于不确定所有属性名的场景）

interface OpeningHoursViewModel {
  [weekday: string]: { isOpen: boolean };
}

• 方式二：明确定义所有星期属性（类型更严格，适用于固定星期列表的场景）

interface OpeningHoursViewModel {
  monday: { isOpen: boolean };
  tuesday: { isOpen: boolean };
  wednesday: { isOpen: boolean };
  thursday: { isOpen: boolean };
  friday: { isOpen: boolean };
  saturday: { isOpen: boolean };
  sunday: { isOpen: boolean };
}

3. 初始化对象避免undefined错误 #

在组件类中初始化openingHoursObj时，要确保每个weekday对应的属性已创建，避免模板中出现undefined.isOpen的报错：

weekdays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
openingHoursObj: OpeningHoursViewModel = {
  monday: { isOpen: false },
  tuesday: { isOpen: false },
  wednesday: { isOpen: false },
  thursday: { isOpen: false },
  friday: { isOpen: true },
  saturday: { isOpen: true },
  sunday: { isOpen: false }
};

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