Как сделать enum mat-select с параметром по умолчанию из большого массива элементов в 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

Так есть идеи? Должен ли я вместо этого заменить массив Reactive Forms? Я мог бы поклясться, что делал что-то подобное раньше, но не могу определить, что я сделал или как это сделать.

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;
  }
}

Затем я просто называю это по-ал oop примерно так:

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

Я надеялся найти какой-нибудь способ сделать это встроенным без отдельного элемента управления, но это кажется работать. Если я не вижу лучшего ответа, это соответствует тому, что я надеялся сделать.