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

angular2 remove or disable select option from secondary select element

提问by daddyschmack

I'm working on an angular 2 prototype component. I have two select controls that have the same options. In the second select element (destination) I would like to disable or remove the option that was selected in the first select element (origin). (Incidentally, any idea why the first selected option is displaying?)

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

Here is the plunkr

这是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)
 }
}

回答by Dethariel

You can disable the option by simply binding to the [disabled]DOM attribute:

您可以通过简单地绑定到[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>

This will make the currently selected "Origin" value disabled in the "Destination" selector (see plunker)

这将使当前选择的“源”值在“目的地”选择器中被禁用（参见plunker）

---

---

As to your other mini-question, which I read as "Why the first option is notdisplayed?". That's probably due to the fact that "trip_origin"is bound to [(ngModel)]="origin". You set this.origin = {}in the component's constructor. There's no corresponding object in this.items, so Angular does not know how to bind to this value. You can change this option to be

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

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

and change the ctor to have the line

并更改 ctor 以拥有这条线

this.origin=this.none={};

Then it's displayed as expected (see here)

然后它按预期显示（请参阅此处）

回答by burgula shyam

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;
   });
  }