저는 앵귤러 2 프로토 타입 컴포넌트를 작업 중입니다. 동일한 옵션을 가진 두 개의 선택 컨트롤이 있습니다. 두 번째 선택 요소 (대상)에서 첫 번째 선택 요소 (원점)에서 선택한 옵션을 비활성화하거나 제거하고 싶습니다. (부수적으로, 첫 번째로 선택한 옵션이 표시되는 이유는 무엇입니까?)
여기 플런 커가 있습니다
//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)
}
}
[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>
이렇게하면 현재 선택된 "Origin"값이 "Destination"선택기에서 비활성화됩니다 ( 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={};
그러면 예상대로 표시됩니다 ( 여기 참조 ).
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다