Question

我有一个非常简单的角度材质选择组件，该组件由一系列对象填充。我尝试使用ngModel和组件的select属性进行双向绑定，但是都无法按预期工作。

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

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

如何复制： 选择Option2，然后返回Option1，仅播放2个选项。

复制位置： https://stackblitz.com/edit/angular-qpk2di

Answer 1

所以您实际上没有那么复杂，因为您错误地使用了[[）]大括号

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

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

[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>

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

2 个答案: