我希望在第一个下拉列表中选择的值不会出现在第二个下拉列表值中

Question

我有两个dropdown，两个dropdown绑定了不同的模型。我希望在第一个下拉列表中选择的值不会出现在第二个下拉列表值中。选择贷方分类账

                         Select Ledger                         

我只希望当我选择借方分类账时，在贷方分类账中选择的值不会显示在借方分类账下拉列表中

Answer 1

尝试使用一些代码过滤选项

HTML：

<select [(ngModel)]="creditLedger">
    <option *ngFor="let c of allOptions" [value]="c">{{c.name}}</option>
</select>

<select [(ngModel)]="creditLedger">
    <option *ngFor="let c of filteredOptions" [value]="c">{{c.name}}</option>
</select>

.TS文件：

public get allOptions(): Array<T> {
    return this.options;
}

public get filteredOptions(): Array<T> {
  return this.array.filter(v =>
    return v !== this.creditLedger;);
}

或

public get filteredOptions(): Array<T> {
     return this.options.splice(this.options.indexOf(this.creditLedger));
}

Answer 2

两个选择都绑定到一个对象。使用两个对象就可以了。

<select [(ngModel)]="creditLedger">
<option *ngFor="let c of options" [ngValue]="c">{{c.name}}</option>
</select>

<select [(ngModel)]="ledger">
<option *ngFor="let c of options" [ngValue]="c">{{c.name}}</option>
</select>

现在，所选选项的值将绑定到creditLedger和分类帐变量。