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

【问题标题】：Angular material select not binding correctly the object value角度材质选择未正确绑定对象值
【发布时间】：2018-12-13 16:23:35
【问题描述】：

我有一个非常简单的角度材质选择组件，它是从一组对象中填充的。我尝试了使用 ngModel 和组件选择属性的双向绑定，但都没有按预期工作。

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

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

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

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

【问题讨论】：

stackblitz 对我有用。我看到选择的值正在更新，绑定selectedOption.value 也是如此。在 1 -> 2 -> 1 -> 2 之间切换
你用的是什么浏览器，因为我在Firefox和Chrome最新版本上测试过，都不能正常工作

标签： angular angular-material angular-forms

【解决方案1】：

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

[]是将值绑定到变量
() 用于事件处理

您在值[(value)] 上使用了事件处理程序和“databinder”，但您只想绑定

[value] = "selected option"

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

【讨论】：

你是我的超级英雄 :D 非常感谢

【解决方案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>

【讨论】：