Angular material select 没有正确绑定对象值

Question

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

我期待的是： 更改 selected 选项会相应地更新 ngModel 值。

实际情况： 更改 selected 选项会触发 select 更改方法，但不会更新绑定属性。

重现方式： Select选项2然后回到选项1，只玩2个选项

转载地点： https://stackblitz.com/edit/angular-qpk2di

Answer 1

所以你的错误实际上并没有那么复杂你错误地使用了 [()] 大括号

[]是给变量绑定一个值
() 用于事件处理

您在值 [(value)] 上使用了事件处理程序和 "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>

Angular material select 没有正确绑定对象值

Angular material select not binding correctly the object value

angular

angular-material

angular-forms