如何在Angular13中设置选中的选项？

Question

我目前正在努力以反应形式将 selected 值动态设置为我的选项之一。我已经构建了一个编辑模式，它应该将当前类别显示为 select 的选项，如果我打开该编辑模式而不是空白 select。我的选项在 selection 上显示正常，但如果我想设置该值，它会以某种方式保持为空（不是 selected）。

目前我的select是这样构建的

<select
      formControlName="categories"
      (change)="selectCategory($event)"
      class="form-select"
      id="categories">
      <option *ngFor="let category of categories"
              [value]="category.id">
        {{category.name}}
      </option>
</select>

我也试过这样构建我的选项

<option *ngFor="let category of categories"
         [value]="category.id"
         [selected]="category === credential.category">

但这没有用。还尝试检查类别的 .name。

这是我的 .ts 文件的一部分。

public selectCategory(event: Event): void {
    const category: Category | undefined = this.categories.find((category: Category) => {
      return category.id === parseInt((event.target as HTMLInputElement).value);
    });

    this.credentialEditForm.get('category')?.setValue(category);
}

// called in the components ngOnInit() method
private initForm(): void {
    this.credentialEditForm = this.formBuilder.group({
      category: [this.credential.category, Validators.required],
      categories: this.categories,
    });
}

// called when I open the modal so the current values should be put in
// works on other fields the form has (I just didn't put them in here for the code to be shorter)
private fillFormWithInfo(): void {
    this.credentialEditForm.setValue({
      category: this.credential.category,
      categories: this.credential.category.name,
    });
}

我使用类别和类别作为表单字段，因为如果我只使用类别并且我 select 一个选项，select 字段也不会显示刚刚 selected 的值.

Answer 1

发现我的错误。我没有将我的类别字段设置为 id 而是名称。在我的 html 中，我还将选项的值设置为类别 ID，因此显然它也应该设置为代码中的 ID。

private fillFormWithInfo(): void {
    this.credentialEditForm.setValue({
      category: this.credential.category,
      categories: this.credential.category.id,
    });
}

如何在Angular13中设置选中的选项？

How to set selected on option in Angular 13?

angular

angular-reactive-forms