Angular 显示带有枚举选项的垫选择，并保存所选项目

Question

尝试在网上浏览不同（过时的？）选项的迷宫，找出简单地显示一个填充有枚举的可能值的

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>

在dialog.ts中

我复制粘贴

    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 几乎一无所知，我确信这对我没有帮助。所以，如果这是一个可怕的问题，我深表歉意，但我正在努力让它在我失去的时间里一事无成的情况下工作好几天。

Answer 1

如果您被允许拥有

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>

Answer 2

这是一种方法：

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

。