从 mat-country-select 获取整个 Country 数组

Question

我在我的角度项目中使用反应式表单，并使用 mat-country-select 在我的子 FormComponent 中的 select 中显示国家/地区。

<mat-select-country class="full-width"
                            [formControl]="form.controls.country"
                            [required]="true"
                            appearance="outline"
                            [itemsLoadSize]="0"
                            [value]="DEFAULT_COUNTRY"
                            label="Choose country">
          
        </mat-select-country>

我尝试制作模式对话框窗口来更新父 PlayerComponet 中的 Player，其结构如下。

export interface Player extends BaseResponse {
  lastName: string;
  firstName: string;
  dateOfBirth: Date;
  country: string;
  height: number;
  weight: number;
  position: string;
  jerseyNumber: number;
  teamName: string;
  teamId?: string | null;
  photoPath?: string | null;
}

在 PlayerComponent 打开更新对话框窗口之前，我应该初始化并将表单传递给我的 FormComponent

export class PlayersComponent implements OnInit {
  countries: Country[] = COUNTRIES;
 playerActionsForm!: FormGroup<PlayerActionsForm>;

fillUpdatePlayerForm(player: Player) {
    this.playerActionsForm.controls.id.setValue(player.id);
    this.playerActionsForm.controls.firstName.setValue(player.firstName);
    this.playerActionsForm.controls.lastName.setValue(player.lastName);
    this.playerActionsForm.controls.birthDay.setValue(player.dateOfBirth);
    const country = this.countries.find(
      (country) => country.name === player.country,
    );
    this.playerActionsForm.controls.country.setValue(country ? country : null);
    this.playerActionsForm.controls.height.setValue(player.height);
    this.playerActionsForm.controls.weight.setValue(player.weight);
    this.selectTeams$
      .pipe(
        map((teams) => teams?.find((team) => team.id === player.teamId)),
        take(1),
        untilDestroyed(this),
      )
      .subscribe((team) => {
        this.playerActionsForm.controls.team.setValue(team ? team : null);
      });
    this.playerActionsForm.controls.jerseyNumber.setValue(player.jerseyNumber);
    this.playerActionsForm.controls.position.setValue(player.position);
    this.playerActionsForm.controls.experiences.setValue([]);
  }

  initializeActionsForm() {
    this.playerActionsForm = new FormGroup<PlayerActionsForm>({
      id: new FormControl(''),
      firstName: new FormControl('', [
        Validators.required,
        Validators.pattern(NAME_PATTERN),
      ]),
      lastName: new FormControl('', [
        Validators.required,
        Validators.pattern(NAME_PATTERN),
      ]),
      birthDay: new FormControl(null, [
        Validators.required,
        dateValidator(moment().subtract(18, 'years').toDate(), 'max'),
      ]),
      country: new FormControl(null, Validators.required),
      height: new FormControl(1.01, [
        Validators.required,
        Validators.min(1.01),
      ]),
      weight: new FormControl(50.01, [
        Validators.required,
        Validators.min(50.01),
      ]),
      team: new FormControl(null),
      position: new FormControl('', Validators.required),
      jerseyNumber: new FormControl(0, [
        Validators.required,
        Validators.min(0),
      ]),
      experiences: new FormArray<FormGroup<PlayerExperienceForm>>([]),
    });
  }

  ngOnInit(): void {
    this.initializeActionsForm();
    
  }

我尝试使用 viewChild 来获取 mat-country-select [Countries] 的 Input 属性，但它不起作用。现在我使用手动创建的预定义数组 COUNTRIES。但我需要解决方案，可以轻松地通过名称获取某个国家/地区，而无需手动创建常量

Answer 1

您是否尝试过在垫选择上使用数据绑定？