问题描述:在Angular中使用mat-select组件时,编辑选项时无法显示对象的属性。
解决方法:
export interface Option {
id: number;
name: string;
}
export interface FormModel {
selectedOption: Option;
}
那么你应该将mat-select的绑定设置为selectedOption.id,而不是selectedOption。
{{ option.name }}
这里的selectedOptionId是一个number类型的变量,它保存了当前选中选项的id值。mat-select-trigger指令会根据这个id值来显示选项的名称。
this.formModel.selectedOption = this.options.find(option => option.id === this.selectedOptionId);
这样,当你编辑选项时,选中的选项将会正确地显示在mat-select中。
完整的示例代码:
import { Component } from '@angular/core';
export interface Option {
id: number;
name: string;
}
export interface FormModel {
selectedOption: Option;
}
@Component({
selector: 'app-root',
template: `
{{ option.name }}
`,
styles: []
})
export class AppComponent {
options: Option[] = [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
{ id: 3, name: 'Option 3' }
];
selectedOptionId: number;
formModel: FormModel = {
selectedOption: null
};
editOption() {
this.formModel.selectedOption = this.options.find(option => option.id === this.selectedOptionId);
}
}
这个示例中,当你选择一个选项并点击“Edit”按钮时,选项的名称将会显示在mat-select中。