Question

我正在研究一个有角度的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)
 }
}

Answer 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>

这将使当前选择的＆＃34; Origin＆＃34;在＆＃34;目的地＆＃34;中禁用了值选择器（见plunker）

关于你的另一个小问题，我读作＆＃34;为什么第一个选项不显示？＆＃34;。这可能是由于"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）

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

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

2 个答案: