Javascript 当项目已选定时，如何隐藏选定选项？角度6+

我有一个非常简单的项目列表循环。在select下拉列表之外还有一个循环，可以选择x个次数。下面的代码就是这样做的。但是，它在IE8/9/11中不起作用，因为不支持[隐藏]。我想知道是否有其他方法可以隐藏已选择的项目

<div *ngFor="let number of numbers; let i = index" >
    <select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
    <option value="Select one" selected>Select one</option>
    <option *ngFor="let prod of productList; let x = index" 
    [ngValue]="prod" [hidden]="p.indexOf(prod) > -1" >{{prod}}</option>
    </select>
</div>

---

有两种方法可以实现你想要的

使用*ngIf

第一种是使用*ngIf，这是首选方法。这将完全从DOM中删除标记

<div *ngFor="let number of numbers; let i = index" >
    <select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
    <option value="Select one" selected>Select one</option>

    <!-- ng-container is now needed because there can only be 1 structural directive per element -->
    <ng-container *ngFor="let prod of productList; let x = index">
        <option *ngIf="p.indexOf(prod) === -1" [ngValue]="prod">{{prod}}</option>
    </ng-container>
    </select>
</div>

component.css

---

我不确定angular是否提供了polyfill

但这提供了一个很好的解决方案，使其在IE中工作

使用自定义属性[attr.data hidden]而不是[hidden]，然后使用css隐藏

html

---

谢谢你的回答。但是，如果我在IE中尝试这样做，即使我换了一个不同的选项，该选项也会停留在“选择一个”上

<div *ngFor="let number of numbers; let i = index" >
    <select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
    <option value="Select one" selected>Select one</option>

    <!-- [class.hidden]="" appends the "hidden" css class, when the expression  on the right evaluates to true -->
    <option *ngFor="let prod of productList; let x = index" 
    [ngValue]="prod" [class.hidden]="p.indexOf(prod) > -1" >{{prod}}</option>
    </select>
</div>

.hidden {
    visibility: hidden;
}

<div *ngFor="let number of numbers; let i = index">
    <select class="roles-select" [(ngModel)]="p[i]" (change)="selected($event)" (blur)="toggleForm($event, 'p', i);">
    <option value="Select one" selected>Select one</option>
    <option *ngFor="let prod of productList; let x = index" 
    [ngValue]="prod" [attr.data-hidden]="p.indexOf(prod) > -1 ? true: false" >{{prod}}</option>
    </select>
</div>

[data-hidden="true"]
{
  display: none !important
}