Question

我在mat-select组件（角度材质）中遇到双向绑定问题。在我的ts文件中，我有一个选项列表和绑定变量（valueFromDB）。然后我在mat-select组件中选择值，将值复制到valueFromDB变量。另一方面，On sceen load我希望在mat-select组件中看到valueFromDB变量。我该怎么办？

https://stackblitz.com/edit/angular-grupfc?file=app%2Fselect-value-binding-example.html

export class SelectValueBindingExample {
  valueFromDB = new Option('Option2');
  options = [new Option('Option1'), new Option('Option2'), new Option('Option3')];
}

export class Option{
  name:string;
  constructor(n:string){
    this.name = n;
  }
}

<mat-form-field>
    <mat-select [(ngModel)]="valueFromDB" >
        <mat-option>None</mat-option>
        <mat-option *ngFor='let option of options' [value]='option' >{{option.name}}</mat-option>

    </mat-select>
</mat-form-field>

Answer 1

您的valueFromDB没有引用数组中的对象，因此Angular无法绑定它们。我看到两个选项，通过查找数组中的匹配值来创建引用，如：

ngOnInit() {
  this.valueFromDB = this.options.find(x => x.name === this.valueFromDB.name)
}

或然后使用compareWith：

compareFn(op1: Option, op2: Option) {
  return op1.name === op2.name;
}

并在模板中：

<mat-select [(ngModel)]="valueFromDB" [compareWith]="compareFn">

你的StackBlitz与compareWith：https://stackblitz.com/edit/angular-grupfc-yjl58l?file=app%2Fselect-value-binding-example.html（创建对象引用也被添加但注释掉了）

将值加载到mat-select组件

1 个答案: