mat-select не отображает значение при выполнении двусторонней привязки в реактиве из

Question

У меня есть реактив, как показано ниже:

 createInputForm() {
    console.log('creating form');
    this.instituteForm = this.formBuilder.group(
      {
        address: [this.instituteData.address, Validators.required],
        city: [this.instituteData.city, Validators.required],
        pin: [this.instituteData.pin, Validators.required],
        contactNumbers: [this.instituteData.contactNumbers, Validators.required],
        mailId: [this.instituteData.mailId, Validators.required],
        website: [this.instituteData.website, Validators.required],
        allowedGender: [this.instituteData.allowedGender, Validators.required]
      }
    );
  }

ngOnInit(): void {
    this.store.dispatch(new fromInstituteActions.SelectInstitute());
    this.isRequestInProgress$ = this.store.select(fromInstituteSelectors.GetHttpRequestProgress);
    this.store.select(fromInstituteSelectors.GetCurrentInstitute).subscribe(data => {
      this.instituteData = data;
      if (data) {
        this.createInputForm();
      }
      console.log(this.instituteData);
    }
    );

, а храм html выглядит как

<mat-form-field>
   <mat-select placeholder="Allowed Gender in institute" formControlName="allowedGender">
       <mat-option *ngFor="let item of genders | enumToArray" [value]="item.key">{{item.value}}
        </mat-option>
   </mat-select>
</mat-form-field> 


@Pipe({ name: 'enumToArray' })
export class EnumToArrayPipe implements PipeTransform {
  transform(value): any {
    const keys = [];
    for (const enumMember in value) {
      if (!isNaN(parseInt(enumMember, 10))) {
        keys.push({ key: enumMember, value: value[enumMember] });
      }
    }
    return keys;
  }
}

export enum AcceptedGender {
  Male,
  Female,
  All
}

, в идеале для параметра mat должно быть выбрано значение по умолчанию, которое передается при создании компонента. Но это не отображает значение. Я использую канал для преобразования enum в ключ и значение.

Answer 1

Это должна быть функция createInputForm:

 createInputForm() {
    console.log('creating form');
    this.instituteForm = this.formBuilder.group(
      {
        allowedGender: [this.data.allowedGender.toString(), Validators.required]
      }
    );

  }

Что-то, на что нужно обратить внимание с помощью Pipe, также означает, что вы не получаете 2 в качестве ключа, но '2', из-за которого ваша версия не отображает значение

Редактировать: Материал