Question

请问我在将ngModel ngFor中的select option角度对齐时遇到问题。当我单击编辑按钮时。我看不到预先选择的类型。这是我的源代码：

<select class="form-control col-sm-8" id="type" [(ngModel)]="category.type" name="type">
          <option *ngFor="let elt of categoryTypes" [ngValue]="elt.code">
            {{elt.value}}
          </option>
</select>

category包含有关所选类别的所有数据。但未预先选择类型。 category.type包含elt.code值，而不包含elt.value

我的component.ts代码：

openEditModal(element, type: string) {
    console.log("this is the category to edit ",element);
    this.category = element;
    }

getAllTypes() {
    this.categoryService.getAllTypes().then(response => {
      console.log('get all Category types ', response);
      this.categoryTypes = response; 
    });

}

Answer 1

在您的组件中，您应该有类似的内容：

 categoryTypes = [
    {value: 'val1', code: 'code1'},
    {value: 'val2', code: 'code2'}
    ];

 category: { type :string, } = { type: 'code1' }; // this would be selected val

看看：https://stackblitz.com/edit/angular-sbxkrh

Answer 2

Angular使用对象标识来选择选项，这就是为什么它未被预选的原因

要自定义默认选项比较算法，支持compareWith输入。 compareWith具有两个功能参数：option1和option2。如果给出compareWith，则为Angular 通过函数的返回值选择选项。

component.html

   <select class="form-control col-sm-8" id="type" [compareWith]="compareFn" 
       [(ngModel)]="category.type" 
       name="type">
              <option *ngFor="let elt of categoryTypes" [ngValue]="elt">
                {{elt.value}}
              </option>
        </select>

component.ts

 compareFn(option1,option2): boolean {
        return option1.type=option2.type;
    }

示例：https://stackblitz.com/edit/angular-iwjghz?file=src%2Fapp%2Fapp.component.ts

参考：https://angular.io/api/forms/SelectControlValueAccessor

如何在带有选项angular的select标签中将ngModel ngFor装配在一起

2 个答案: