angular2 보조 선택 요소에서 선택 옵션을 제거하거나 사용 중지합니다.

Question

저는 각도 2 프로토 타입 구성 요소를 사용하고 있습니다. 동일한 옵션을 가진 두 개의 선택 컨트롤이 있습니다. 두 번째 select 요소 (대상)에서 첫 번째 select 요소 (origin)에서 선택한 옵션을 비활성화하거나 제거하고 싶습니다.

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

: (? 덧붙여, 어떤 생각이 왜 처음 선택한 옵션이 표시됩니다) 여기

는 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 속성과 결합하여 옵션을 해제 할 수있다 그러면 "Destination"선택기에서 현재 선택된 "Origin"값이 비활성화됩니다 (plunker 참조)

---

다른 미니 질문에 대해서는 "왜 첫 번째 옵션은 이 아니며이 표시 되었습니까?"라고 읽었습니다. 이는 아마도 "trip_origin"이 [(ngModel)]="origin"에 바인딩되어 있기 때문일 수 있습니다. 구성 요소의 생성자에 this.origin = {}을 설정합니다. this.items에는 해당 개체가 없으므로 Angular는이 값에 바인딩하는 방법을 알지 못합니다. 당신은 (here 참조)