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

【问题标题】：All Mat-select values change when i change a single mat-select当我更改单个 mat-select 时，所有 Mat-select 值都会更改
【发布时间】：2020-08-10 07:25:29
【问题描述】：

我有天数（在 mat-checkbox 中）和时间范围（在 mat-select 中）组件。我能够在几天内获取所有检查的值。但是当我尝试更改小时/分钟范围（例如，星期一）时，所有天的时间范围都会更改。你能帮我获取每一天的时间范围吗？比如周日上午 9:00 到下午 5:00，周一上午 10:00 到下午 3:30。

stackblitz 网址是demo

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我建议使用子组件来处理每一行，创建接口来键入代码也会更容易理解。

每条线的模型如下所示：

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.

【讨论】：

这正是我想要的！ - 非常感谢

【解决方案2】：

这是因为您在所有小时和所有分钟都使用了相同的变量：

fromHoursSelected 和 fromMinutesSelected...

你应该对每个项目有不同的价值：

喜欢：

fromMinutesSelected[0] fromMinutesSelected[1] ...

更好的解决方案应该是为每一行编写一个组件。

请检查我在此线程中的答案： how to collapse with ngx-bootstrap angular without a flag

【讨论】：