angular - 如果其他选择框选项更改为 Angular 2.0 中的相同选项，如何添加和删除选择框选项

Question

我的需求

当在另一个选择框中选择相同的选项时，我需要删除存在于另一个选择框中的选项

我做了什么

我创建了 3 个选择框并在其中加载了相同的值，并且我在 enableAllOptions 中创建了 2 个函数 enableAllOptions disableOptions > 函数是第一次启用所有选项，在 disableOptions 中是根据从选择框中选择的选项禁用选项

我正在粘贴功能齐全的 Plunker供大家引用(select box的data loading有问题)

这是我的 HTML 代码

<h1>{{title}}</h1>
<div class="container">
        <form role="form" calss="form-inline">
    <div class="form-group col-xs-3">
        <label>Select State:</label>
        <select class="form-control" [(ngModel)]="rules.State" id="sel1">
 <option *ngFor="#hey of states" value="{{hey.value}}">{{hey.name}}</option>
        </select>
    </div>
    <div class="form-group col-xs-3">
        <label>Rule:</label>
<input type="text" data-toggle="modal" data-target="#myModal"class="form-control">
    </div>
    <div class="form-group col-xs-3">
        <label>Pass State :</label>
        <select class="form-control" [(ngModel)]="rules.pass">
 <option *ngFor="#hey_pass of state_pass" value="{{hey_pass.value}}">{{hey_pass.name}}</option>
        </select>
    </div>
    <div class="form-group col-xs-3">
        <label>Fail State:</label>
        <select class="form-control" [(ngModel)]="rules.fail">
 <option *ngFor="#hey_fail of state_fail" value="{{hey_fail.value}}">{{hey_fail.name}}</option>
        </select>
    </div>
</form>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Rules Configuration</h4>
        </div>
        <div class="modal-body">
            <p>Rules</p>
        </div>
        <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

   </div>
</div>

plunkr 链接中的 app.component.ts 文件请查看，这可能是重复的问题，但这个问题是基于 Angular 2.0 而不是 AngularJS 1.x。

Answer 1

您可以将(更改)事件用作:

 <select class="form-control" [(ngModel)]="rules.State" id="sel1" (change)="statechange($event.target.value)">
 <option *ngFor="#hey of states" value="{{hey.value}}">{{hey.name}}</option>
 </select>

然后在 .ts 文件中定义一个方法“statechange”并从 states 数组中删除值。