带有多个选项的My Mat Select未正确更新

Question

我正在尝试创建一个允许多种选择的Mat-Select，它也使用Option Groups。这个想法是用可选择的组来嵌套选项
例如，在我的案例中，我列出了分配给不同团队的工作。我希望能够选择特定的工作，或者通过选择团队来选择分配给团队的所有工作。

我使用的是Reactive表单组件，尽管我应该将值正确分配给inputControl，但显示永远不会更新，即所选元素的复选框永远不会更新。

这是我的html代码：

<mat-form-field appearance="fill">
<mat-label>Jobs</mat-label>
<mat-select multiple>
<mat-optgroup *ngFor="let group of teams" >
<mat-checkbox
(change)="onSelectTeam($event, group)"
>
{{group.team.name}}
</mat-checkbox>
<mat-option *ngFor="let job of group.jobs" [value]="job">
{{projectIndex[job].name}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>

这是我的.ts代码：

inputFormControl = new FormControl();
teams = [
{
team: {
id: "e4a3661f-a20b-4720-8c19-2e836821c267",
code: "T1A",
name: "Test Team A"
},
jobs: [
"757c7218-4151-4b95-ac21-d9693c6b0e3d",
"642c0226-d4a6-4a20-9cbb-29eaf90b35a8"
]
},
{
team: {
id: "d9d367aa-6b3d-4990-b227-b54a7324292c",
code: "T2A",
name: "Test Team B"
},
jobs: [
"bb3c32fd-519f-4528-9629-a216819351e7",
"ffce4587-0805-4f7d-9d32-b158244c9b58",
"36e6eb29-be0f-432b-a121-62bd71d200e7"
]
}
];
projectIndex = {
"757c7218-4151-4b95-ac21-d9693c6b0e3d": {
id: "757c7218-4151-4b95-ac21-d9693c6b0e3d",
name: "Project 1"
},
"642c0226-d4a6-4a20-9cbb-29eaf90b35a8": {
id: "642c0226-d4a6-4a20-9cbb-29eaf90b35a8",
name: "Project 2"
},
"bb3c32fd-519f-4528-9629-a216819351e7": {
id: "bb3c32fd-519f-4528-9629-a216819351e7",
name: "Project 3"
},
"ffce4587-0805-4f7d-9d32-b158244c9b58": {
id: "ffce4587-0805-4f7d-9d32-b158244c9b58",
name: "Project 4"
},
"36e6eb29-be0f-432b-a121-62bd71d200e7": {
id: "36e6eb29-be0f-432b-a121-62bd71d200e7",
name: "Project 5"
}
};
onSelectTeam(event: any, team: Team): void
{
console.log(team);
let currValue = this.inputFormControl.value;
currValue = currValue ? currValue : [];
if (event.checked)
{
currValue.push(...team.jobs);
}
else {
team.jobs.forEach(job => currValue.splice(currValue.indexOf(job), 1));
}
console.log(this.inputFormControl.value);
console.log(currValue);
this.writeValue(currValue);
}
onChange = (value: any) => {};
onTouched = () => {};
registerOnChange(fn: () => void): void {
this.onChange = fn;
}
// Allows Angular to register a function to call when the input has been touched.
// Save the function as a property to call later here.
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
// Allows Angular to disable the input.
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
if (isDisabled) {
this.inputFormControl.disable();
}
}
writeValue(obj: any): void
{
this.inputFormControl.setValue(obj);
}
validate(): ValidationErrors | null {
if (!this.inputFormControl.valid) {
return this.inputFormControl.errors;
}
return null;
}

组件本身是一个自定义组件，因此它使用ControlValueAccessor。如果有人能帮我找出问题所在，我将不胜感激。

Answer 1

问题值不是在html上运行时设置的，而是在控制台中显示的。第一次为null，但当您调试它的值时显示它。这个问题是因为同步调用，当您调用它时，您必须设置该函数中变量的值例如：；这个很好this.http.post(${this.bUrl}，this.user(.subscribe(res=>if(res.toString((({localStorage.setItem("tokenVal"，res["token"](；this.router.navigation(["/home"](；}})；问题是当你把它称为

this.http.post(`${this.bUrl}`, this.user).subscribe(res => {
if (res.toString()) {
Val = res;
}
});
localStorage.setItem("tokenVal", Val["token"]);
this.router.navigate(["/home"]);
similarly you can call it in your function where you are going to set values.

Answer 2

我遇到了一个与Angular反应形式和patchValue非常相似的问题。当试图"；全部检查"；在matoptgroup上，通过调用patchValue并传递一个id数组，复选框不会在视觉上更新。

如果我继续进行绑定到表单的GET调用；全部检查"；函数工作正常，它正确地将id作为参数传递。

我仍在深入研究这个问题，但通过在实际调用之前直接用null调用patchValue，我找到了解决方案。

formGroup.get('FORM_CONTROL').patchValue(null);
formGroup.get('FORM_CONTROL').patchValue(['id1','id2','id3'])