angular - 当我更改单个 mat-select 时，所有 Mat-select 值都会更改

Question

我有天(在垫子复选框中)和时间范围(在垫子选择中)组件。我能够在几天内获取所有检查的值。但是当我尝试更改小时/分钟范围(例如，星期一)时，所有天的时间范围都会更改。你能帮我获取每一天的时间范围吗？比如周日上午 9:00 到下午 5:00，周一上午 10:00 到下午 3:30。
stackblitz 网址是 demo

Answer 1

我建议使用子组件来处理每一行，创建输入代码的接口(interface)也会更容易理解。
每条线的模型如下所示:

export interface Slot {
  id: string;
  isChecked: boolean;
  label: string;
  fromHoursSelected: string;
  fromMinutesSelected: string;
  fromAmpmSelected: string;
  toHoursSelected: string;
  toMinutesSelected: string;
  toAmpmSelected: string;
}

你可以创建一个组件来编辑这个模型来实现 ControlValueAccessor :

export class SlotComponent implements ControlValueAccessor {
  hoursList: string[] = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11'];
  minutesList: string[] = ['00', '30'];
  ampmList: string[] = ['AM', 'PM'];

  onChange = (slot) => {};
  onTouched = () => {};

  model: Slot = {} as Slot;

  writeValue(value: Slot) {
    this.model = value;
  }

  registerOnChange(fn: (rating: number) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

}

Here is a running example.