尝试在网上浏览不同(过时的?)选项的迷宫,找出简单地显示一个填充有枚举的可能值的
mat-select
,并存储结果,以便我可以将所选选项发送到后端。
我见过的大多数选项根本无法编译(不再?)。所以我就这么做了,每一个建议都非常受欢迎,我显然仍然非常学习 Angular...
<div>
<mat-label>Type</mat-label>
<mat-select>
<mat-option *ngFor="let type of getKeys() | keyvalue" [value]="type.key">
{{type.value}}
</mat-option>
</mat-select>
</div>
我复制粘贴
getKeys() {
const contactPersonMap = new Map<ContactPersonType, string> ([
[ContactPersonType.Invoicing, 'Invoicing'],
[ContactPersonType.SignWorkingHours, 'Sign month reports']
]);
return contactPersonMap;
}
似乎有一种更简洁的方法(gpt 建议):
const fruitMap = Object.keys(Fruit).reduce((map, key) => {
map[Fruit[key]] = key;
return map;
}, {});
但是我收到编译错误,抱怨隐式任何类型我不知道如何解决。所以现在我会坚持使用“更多样板”的方法来手动定义地图,直到我长大为止。
在对话框中我还发回了我传入的“模型”,如下所示:
add() {
this.dialogRef.close(this.data);
}
最后在 .ts 中打开对话并等待结果
const dialogConfig = new MatDialogConfig();
dialogConfig.data = this.selectedContactPerson;
const dialogRef = this.dialog.open(AddCustomerContactDialog, dialogConfig);
dialogRef.afterClosed().subscribe(result => {
console.log(`${result.firstName}`);
console.log(`${result.lastName}`);
console.log(`${result.type}`);
});
firstName、lastName(很简单
matInput
后面有一个 ngModel
)可以工作。是的,对我来说。
但是记录类型时,它会打印“未定义”。
如何让它发挥作用?我想要对话框设置模型中选定的枚举值。
我忘了提及,我首先定义
<mat-option>
如下
<mat-option *ngFor="let type of getKeys() | keyvalue" [(ngModel)]="type.key" #type="ngModel" name="type">
然后,选择将被填充,但是当我选择一个值时,所选项目仍为空。如果有人愿意解释为什么会这样,也将不胜感激。PS:除了对 Angular 不熟悉之外,我对 javascript 几乎一无所知,我确信这对我没有帮助。所以,如果这是一个可怕的问题,我深表歉意,但我正在努力让它在我失去的时间里一事无成的情况下工作好几天。
any
,您仍然可以这样做:
types = Object.keys(FRUIT).map(
(fruit) => ({ key: fruit, value: (FRUIT as any)[fruit] })
);
和
<mat-option *ngFor="let type of types" [value]="type.key">
{{type.value}}
</mat-option>
// Wherever the enum is defined
enum SomeOptions {
Option1 = 0, // Or some other value
Option2 = 1,
}
// In your template
<mat-form-field>
<mat-label>Options</mat-label>
<mat-select>
<mat-option *ngFor="let option of SomeOptions.values()" [value]="option">
{{ SomeOptions[option] }}
</mat-option>
</mat-select>
</mat-form-field>
mat-select
将向用户显示“Option1”和“Option2”选项,并且所选选项值将分别为
0
和
1
。