1

在我的 Angular 应用程序中，我使用选择控件让用户在 *ngFor 循环中填充选项。对于第一次调用（或直到用户设置实际值），选择为空，一旦做出选择，他们可以更改值但不能将其设置回“空”。这就是它的设计和工作方式，直到 angular 8。

直到 ng 8 我的代码看起来像这样，只要 someValue 为空，选择控件中就没有预选条目：

<select [value]="someValue" (change)="onSelectionDataChanged($event.target.value)">
  <option *ngFor="let option of options" [value]="option"> {{ option }} <option>
</select>

与 ivy<select [value]=...>一起使用<option *ngFor=...>（请参阅https://angular.io/guide/ivy-compatibility-examples#select-value-binding），但那里提出的解决方案总是选择第一个条目，即使 someData 为空. 这有两个缺点：1. 显示意味着选择了第一个条目，这是不正确的；2. 要实际选择第一个条目（并保存选择以供后端使用），用户现在必须先选择第二个条目然后选择第一个条目。

修改后的代码（如 angular guilde 中所建议）如下所示：

<select (change)="onSelectionDataChanged($event.target.value)">
  <option *ngFor="let option of options" [value]="option" [selected]="option === someValue"> {{ option }} <option>
</select>

一种解决方法是将 emty 字符串添加到选项数组，但这使用户能够完全删除他们的选择。

有没有办法在常春藤中进行空预选的选择？

4

1 回答 1

1

答案https://stackoverflow.com/a/23638053/2131459对我有用：

只需添加一个带有隐藏和禁用集的选项：

<select (change)="onSelectionDataChanged($event.target.value)">
  <option hidden disabled [selected]="!someValue" value=""></option>
  <option *ngFor="let option of options" [value]="option" [selected]="option === someValue"> {{ option }} <option>
</select>
于 2020-01-28T10:10:31.433 回答