带多个绑定属性的角度原生HTML选择

Question

我有一个<select>标记，它需要将multiple属性绑定到组件中的值。如果我这样做：

<select [multiple]="multiple" [(ngModel)]="model" id='sel' name='sel'>
<option *ngFor="let option of options" [ngValue]="option.value">{{option.label}} - {{option.value}}</option>

然后，我得到了非常奇怪的行为——页面启动时选择了第一个项目，尽管ngModel值被设置为不同的选项项目。此外，绑定的ngModel在更改时可以给出一个数组，这是multiple标记所期望的，尽管我希望该标记依赖于布尔值。

以下是StackBlitz：https://stackblitz.com/edit/angular-ivy-bpvmt2?file=src%2Fapp%2Fapp.component.html

Answer 1

select标签上[multiple]的存在导致创建SelectMultipleControlValueAccessor，用于写入多选控件值和侦听多选控件更改。无论我们将[multiple]绑定到true值还是false值，都会发生这种情况。

选择MultipleControlValueAccess或选择

因此，即使multiple设置为false，绑定到ngModel的值也需要是数组。它是有效的，但是模型应该是一个有一个元素的数组。

期望model基于绑定到[multiple]的布尔值在数组和非数组类型之间切换，意味着需要动态创建相关的ControlValueAccessor指令并将其与同一NgModel实例关联。