Update

目前調整管道輸出number可以雙向繫結回資料來源了

return Object.keys(value)
    .map(x=>Number(x))
    .filter(x=>!isNaN(x));

原本無法繫結的問題是我把select裡面value存成string
但來源enum只收number所以無法的樣子

情況是我有一個API會取得活動資料 ActivityDto

activity: ActivityDto = new ActivityDto();

ngOnInit(): void {
    this._activityService.get(this._id).subscribe(result => {
        this.activity = result;
    });
}

活動資料 ActivityDto
(活動資料內包含一個Enum型態的活動種類)

export interface IActivityDto {
    activityType: ActivityTypeEnum | undefined;
}

活動種類(Enum)

export enum ActivityTypeEnum {
    FirstActivity = 1, 
    SecondActivity = 2, 
}

我想建立編輯頁面時遇到幾個問題

1.如何顯示下拉式選單中的顯示部分

<mat-option *ngFor="let activityType of activity.activityType 
[value]=activityType>
{{activityType}}
</mat-option>

目標：Value 要是 1,2
而Text內文 {{}} 要顯示 FirstActivity,SecondActivity
let of 不支援 enum 所以上面其實跑不了
我目前是用管線去處理先轉成Array

export class EnumToArrayPipe implements PipeTransform {
  transform(value: any, args?: any): any {
      if(!value)
          return value;
      return Object.keys(value).filter(k => !isNaN(Number(k)));
  }
}

以上會取得 string[]{'1','2'}
然後再用管線去顯示資料

switch (value) {
    case '1':
      return "FirstActivity";
    case '2':
      return "SecondActivity";
}

2.如何繫結資料

<mat-select
name="ActivityType"
[(ngModel)]="activity.activityType"

enum資料好像無法直接繫結到我轉好的string[]{'1','2'}
所以目前我接完資料先轉成字串才能初始化selected

activityTypeSelected:string;
this.activityTypeSelected = this.activity.activityType.toString();

HTML改用

<mat-select
name="ActivityType"
[(ngModel)]="activityTypeSelected"

最後回存的時候再把string轉回int回存enum
this.activity.activityType = Number(this.activityTypeSelected);

有比較好的做法建議嗎?