角度材质选择未正确绑定对象值

Question

我有一个非常简单的角度材料选择组件，它由一组对象填充。 我尝试了与 ngModel 和组件 select 属性的双向绑定，但两者都没有按预期工作。

我的期望：更改所选选项会相应地更新 ngModel 值。

实际发生的情况：更改所选选项会触发选择更改方法，但不更新绑定属性。

如何重现：选择Option2，然后返回Option1，只玩2个选项。

在哪里复制： https : //stackblitz.com/edit/angular-qpk2di

Answer 1

所以你的错误实际上并不复杂，你错误地使用了 [()] 大括号

1. [] 是将一个值绑定到一个变量
2. () 用于事件处理

您在 value [(value)]上使用了 eventhandler 和“databinder”，但您只想绑定

[value] = "selected option"

该事件由(selectionOnChange)="handleYourEvent()"事件处理

Answer 2

您可以使用 JSON.stringify 将对象转换为字符串以绑定它，然后使用 JSON.parse 将其重新解析为对象以在 TS 文件中使用它。

In your ts file : 

stringifyValue(value) {
    return JSON.stringify(value); 
}

parseValue(value) {
    let selectedObj = JSON.parse(value); 
}

in your html :

<mat-select (selectionChange)="parseValue($event.value)" >
   <mat-option *ngFor="let obj of options" 
   [value]="stringify(obj)">{{ obj.name }}
   </mat-option>
</mat-select>