在 mat-select 中选择一个值会导致尝试"diff"时出错

Question

我的组件中有一个mat-select元素，我用mongoDB的数据填充了它。将数据显示为mat-options对我来说没有问题，但每当我尝试单击某个选项时，就会弹出一个错误。

这是每当我点击垫子选择中的选项时收到的错误消息：Error trying to diff 'isaac'. Only arrays and iterables are allowed。

目前，这就是我所拥有的：

//component.html

<mat-select formControlName="eighteenthCtrl" required (selectionChange)="selected9($event)">
<mat-option *ngFor="let agent of agents" [value]="agent.name">
{{agent.name}}
</mat-option>
</mat-select>

//component.ts

agents: any = [];
ngOnInit() {
this.seventhFormGroup = this.formBuilder.group({
eighteenthCtrl: ['', Validators.required]
});
this.usersService.getAllAgents().subscribe(agents => {
this.agents = agents;
console.log(agents);
});
}
selected9(event: MatSelectChange) {
const selectedData9 = {
value: event.source.value
};
this.agents = selectedData9.value;
console.log(selectedData9);
}

为什么即使我提供了一个数组，它仍然会给我这个错误？此外，console.log(agents)正确地显示了数组及其对象。我错过了什么？

Answer 1

selected9(event: MatSelectChange) {
const selectedData9 = {
value: event.source.value
};
this.agents = selectedData9.value; // <- the problem is here
console.log(selectedData9)
}

问题似乎就在这里。选择一个时，将agents设置为其值string或其他非数组的值。

您可以将其保存在其他属性中。例如：

selected: string;
...
selected9(event: MatSelectChange) {
const selectedData9 = {
value: event.source.value
};
this.selected = selectedData9.value;
console.log(selectedData9)
}