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

我正在研究角度2原型组件。我有两个选择控件具有相同的选项。在第二个select元素（destination）中，我想禁用或删除在第一个select元素（origin）中选择的选项。（？顺便说一下，任何想法，为什么第一次选择的选项显示）angular2从辅助选择元素中删除或禁用选择选项

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

来源

2016-07-29 daddyschmack

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

，改变构造函数有行

this.origin=this.none={};

然后按预期它会显示（见here）

来源

2016-07-29 20:36:37 Dethariel

谢谢！优秀的答案.. – daddyschmack

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

回答

相关问题