gpt4 book ai didi

angular - 将值加载到垫选择组件

转载 作者:行者123 更新时间:2023-12-01 22:26:29 26 4
gpt4 key购买 nike

我在垫选择组件( Angular Material )中遇到 2 路绑定(bind)问题。在我的 ts 文件中,我有一个选项列表和绑定(bind)变量(valueFromDB)。然后我在 mat-select 组件中选择值,它将值复制到 valueFromDB 变量。另一方面,在屏幕加载时,我希望在我的 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>

最佳答案

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

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 (创建对象引用也被添加但被注释掉)

关于angular - 将值加载到垫选择组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49517799/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com