Question

我在应用程序中使用Angular反应形式。我想为多个选择表单控件设置多个值。

mycomponent.html

<select id="placeType" 
        class="form-control" 
        [multiple]="true" 
        style="height:200px" 
        formControlName="kalase">
  <option value="" selected="selected" disabled>Select Place Type</option>
  <option *ngFor="let kalase of types" [value]="kalase" [innerHtml]="kalase"></option>      
</select>

mycomponent.ts

types: string[] = ["BAR", "CAFE", "RESTAU", "hotels", "club"];

this.placeForm = this.formBuilder.group({
  kalase: [[this.types[1], this.types[3]]]
});

问题在于，选择控件中唯一选择的值是类型array（“ hotels”）的第四项。谁能告诉我我在做什么错？

Answer 1

缩短答案

请勿对[]属性使用属性绑定（括号multiple）：

<select id="placeType" 
        class="form-control" 
        multiple
        style="height:200px" 
        formControlName="kalase">

  <option value="" selected disabled>Select Place Type</option>
  <option *ngFor="let kalase of types" 
          [value]="kalase" 
          [innerHtml]="kalase"></option>
</select>

更长的答案

多个select和option是Angular指令。 select指令遍历选项并决定是否选择它：

this._optionMap.forEach(optionSelectedStateSetter);

调用内部option的函数_setSelected：

/** @internal */
_setSelected(selected: boolean) {
  this._renderer.setProperty(this._element.nativeElement, 'selected', selected);
}

对于<select [miltiple]="true" ... ，在此迭代过程中，尚未在'select'元素上渲染multiple属性（Angular尚未对其进行评估），因此{{ 1}}元素被视为单个元素，并且仅最后一个选项（按select数组的顺序）设置为types。

只有在此迭代之后，selected属性才会由Angular渲染，并且从这一点开始，multiple元素将正常运行。因此，即使运行：

select

将“解决”该问题，因为反应形式的模型正确，并且setTimeout(this.placeForm.get('kalase').setValue(this.placeForm.value.kalase));元素现在是多个。

要查看不正确的选项值，可以在控制台中运行：

select

这将为您提供：

[...document.querySelector('#placeType')].map(x => `${x.value}: ${x.selected}`)

对于'': false 'BAR': false 'CAFE': false 'RESTAU': false 'hotels': true 'club': false ，从一开始的元素就充当多个元素，因此，将设置选项设置为选中确实会选择它们。

现在，运行先前的调试查询将给出：

<select multiple ...

如果出于任何原因，您需要'': false 'BAR': false 'CAFE': true 'RESTAU': false 'hotels': true 'club': false属性为条件，我建议使用multiple或使用*ngIf设置默认值或使用反应形式模型的值（因为我已经演示）

STACKBLITZ

无法选择角形的多个值

1 个答案: