angular2 从辅助选择元素中删除或禁用选择选项答案

【问题标题】：angular2 remove or disable select option from secondary select elementangular2 从辅助选择元素中删除或禁用选择选项
【发布时间】：2018-09-28 16:22:53
【问题描述】：

我正在开发一个 Angular 2 原型组件。我有两个具有相同选项的选择控件。在第二个选择元素（目标）中，我想禁用或删除在第一个选择元素（原点）中选择的选项。（顺便说一句，知道为什么显示第一个选择的选项吗？）

这里是plunkr

 //our root app component
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';

 @Component({
   selector: 'my-app',
   providers: [],
   template: `
    <div>
     <h2>{{name}}</h2>
       <select id="trip_origin" [(ngModel)]="origin" 
       class="start" (change)="onChange($event)">
       <option disabled selected >Select a shipping origination</option>
       <option *ngFor="let item of items" [ngValue]="item"> {{item.name}} - {{item.loc}}</option>
      </select>
      <div>selected: {{origin | json}}</div>
      <hr>
      <select id="trip_destination" name="destination" [(ngModel)]="destination">
       <option *ngFor="let item of items" [ngValue]="item">{{item.name}} - {{item.loc}}</option>
      </select>
      <div>selected: {{destination | json}}</div>
   </div>

    <h2>Destination -- {{destination.loc}}</h2>
    <h2>Origin -- {{origin.loc}}</h2>

  `,
 directives: []
})

export class App {

 public items:object[] = [
  {"loc":"HOU","name":"Houston"},
  {"loc":"DAL","name":"Dallas"},
  {"loc":"SAT","name":"San Antonion"}
 ];

 constructor() {
  this.origin={};
  this.name = 'Test Select Control'
  this.destination = this.items[1] 
 }
 onChange($event){
     console.log($event)
 }
}

【问题讨论】：

标签： typescript angular

【解决方案1】：

您可以通过简单地绑定到[disabled] DOM 属性来禁用该选项：

<select id="trip_destination" name="destination" [(ngModel)]="destination">
  <option [disabled]="item === origin" *ngFor="let item of items" [ngValue]="item">{{item.name}} - {{item.loc}}</option>
          ^^^^^^^^^^
</select>

这将在“目的地”选择器中禁用当前选择的“原点”值（请参阅plunker）

至于您的另一个小问题，我将其解读为“为什么第一个选项不显示？”。这可能是因为"trip_origin" 绑定到[(ngModel)]="origin"。您在组件的构造函数中设置了this.origin = {}。 this.items 中没有对应的对象，所以 Angular 不知道如何绑定到这个值。您可以将此选项更改为

<option selected disabled [ngValue]="none">Select a shipping origination</option>

并将 ctor 更改为具有该行

this.origin=this.none={};

然后按预期显示（见here）

【讨论】：

【解决方案2】：

template:
    <select class="form-control" (change)="change($event)">
     <option  selected disabled>Select</option>
    <option value="{{ele.name}}" *ngFor="let ele of selectList" [disabled]="ele.isdisabled">
       {{ele.name}}
     </option>
      </select>
 <button type="button" class="btn btn-primary btn-sm" (click)="resetOptions()">Reset</button>
ts file:
selectList: any = [
   { 
     "name":"Name",
    "isdisabled":false
  },
    { 
      "name":"DIN",
      "isdisabled":false
  },
    { 
      "name":"Mobile",
      "isdisabled":false
  }
  ]

change(event) {
    this.selectList.forEach(element => {
      if(event.target[event.target.options.selectedIndex].value===element.name){
        element.isdisabled=true;
      }
    });
  }

to reset:
 resetOptions(){
   $('select').prop('selectedIndex', 0);
   this.selectList.forEach(element => {
     element.isdisabled=false;
   });
  }

【讨论】：

您能否添加一些 cmets 您的答案如何解决问题。作者会更容易理解问题所在。