如何使用Angular9中较大的项数组作为默认的枚举垫选择选项？

Question

所以本质上我有一个Enum：

export enum CourseStatus {
    Active = 1,
    Inactive = 2
}

一个组件（部分）：

...
CourseStatus = CourseStatus;
selected: CourseStatus = CourseStatus.Active;
courseStatuses = [CourseStatus.Active, CourseStatus.Inactive];

和组件视图（局部）

<div *ngFor="let course of courses">
    <mat-expansion-panel [expanded]="expanded">
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{course.name}}   {{course.coursePublisher}}
          </mat-panel-title>
        </mat-expansion-panel-header>

        {{course.courseStatus}}
        <mat-form-field>
            <mat-select [(ngModel)]="course.courseStatus">
                <mat-option *ngFor="let status of courseStatuses" value="{{CourseStatus[status]}}">
                    {{CourseStatus[status]}}
                </mat-option>
            </mat-select>
        </mat-form-field>
       </mat-expansion-panel> 
</div>

所有代码正在正常运行，没有错误以显示潜在值。但是，从数组中的一项获得的默认选择似乎永远不会生成正确的默认值。在我的示例中，我什至填充了模型对象的属性以确保它存在，并针对ngFor数组中的每个项目进行校正，并且它是正确的。有什么想法吗？我可能缺少一些简单的东西，例如我多次铸造枚举。我遵循了Stack Blitz的类似问题，并从这里获取了大部分信息：https://stackblitz.com/edit/angular-mat-select-w-value-solved?file=app%2Fapp.component.ts

有什么想法吗？我应该改为一些反应形式吗？我可以发誓我以前做过类似的事情，但无法找到我所做的或如何做的。

Answer 1

所以我不知道我的答案是否真的是最优雅的方式，但我选择使用这样的视图和组件制作单独的控件：

<mat-form-field>
  <mat-select [(value)]='selected' placeholder="Course Status">
      <mat-option *ngFor="let status of courseStatuses" [value]="status">
          {{CourseStatus[status]}}
      </mat-option>
  </mat-select>
</mat-form-field>

它的组成部分：

@Component({
  selector: 'app-course-status-selector',
  templateUrl: './course-status-selector.component.html'
})
export class CourseStatusSelectorComponent implements OnInit {
  @Input() defaultState: CourseStatus;

  constructor() { }

  CourseStatus = CourseStatus;
  selected: CourseStatus;
  courseStatuses = [CourseStatus.Active, CourseStatus.Inactive, CourseStatus.Pending];

  ngOnInit() {
    this.selected = this.defaultState;
  }
}

然后我只是像这样在循环中调用它：

<div *ngFor="let c of courses">
 <app-course-status-selector [defaultState]="c.courseStatus"></app-course-status-selector>
</div>

我希望找到某种方法来进行内联而不需要单独的控件，但这似乎可行。如果我没有更好的答案，那么此选项即可满足我的期望。