当我更改单个垫选择时，所有 Mat-select 值都会更改

Question

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

堆栈闪电战网址是演示

Answer 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;
}
}

下面是一个运行示例。

Answer 2

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

fromHoursSelected和fromMinutesSelected...

每个项目应具有不同的值：

喜欢：

fromMinutesSelected[0] fromMinutesSelected[1] ...

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

请在此线程中查看我的答案： 如何使用没有标志的 NGX 引导角折叠