Javascript 为什么选择在绑定到模型时显示它的第一个元素

我在angular6中有一个select，其中的选项是迭代数组。 该数组有一个管道，可以动态更改数组值。 问题是，当我在模型和数组中选择了一个值时，该值会被更改，而该值在它迭代的数组中不可用。然后，默认情况下选择显示第一个元素，但它应显示空选择。 请告诉我最好的方法

<select
      (change)="handleOfferChange()"
      class="alc-form-control"
      name="offer"
      id="offer"
      [(ngModel)]="detailCopy.allowedOffers">
      <option
        *ngFor="let offer of providerMaster | active: activeOnly"
        [ngValue]="[offer.csaid]"
        >{{ offer.csaid }}</option
      >
    </select>

---

您可以手动重置ngModel，为此，您必须将ngModel作为参数传递给管道，当数组更改时，在管道中，将ngModel重置为空值，如下所示

//yourTemplate.html
<select [(ngModel)]="detailCopy.allowedOffers" #mySelectModel="ngModel">
<option *ngFor="let offer of providerMaster | active: activeOnly : mySelectModel" [ngValue]="[offer.csaid]" >{{ offer.csaid }}</option>
</select>

//yourPipe.ts
......
import { NgModel } from '@angular/forms';

transform(arr: any[], mySelectModel: NgModel): any {
 if (your logic and conditions) {
  mySelectModel.reset();
  return arr;
 }
}