Angular 2 RC4를 사용하고 있습니다.
내 구성 요소의 변수에 바인딩 된 드롭 다운 선택 요소를 만들고 다음 *ngFor과 같이를 사용하여이 선택에 대한 옵션을 만듭니다 .
<select id="role-select" class="form-control" [(ngModel)]="foo.bars" multiple>
<option *ngFor="let bar of bars">{{bars}}</option>
</select>
bars변수는 동적으로 채워집니다 :
ngOnInit(){
this._service.GetBars().subscribe(
result => {
this.bars = result;
},
err => {
console.log(err);
},
() => {}
);
}
또한 foo.bars변수를 동적으로 채 웁니다 .
constructor(public _service: Service){
_service.GetFooBars()
.subscribe((data) => {
this.foo.bars = data;
},(err) => {
console.log(err);
}, () => {
// done
});
}
이제 내가 원하는 selected것은 barsin 과 일치하는 모든 옵션 에서 속성을 true 로 설정하는 것 입니다 foo.bars. 현재 나는 이것을 사용합니다.
var roleSelect = document.getElementById("role-select");
this.foo.bars.forEach((v,i) => {
for (var j = 0; j < roleSelect.options.length; j++) {
if (roleSelect.options[j].text === v) {
roleSelect.options[j].selected = true;
}
}
});
이것은 완벽하게 작동하지만 트랜스 파일러는 옵션이 HTMLElement []에 존재하지 않는다는 오류를 던지고 약간 더 강력한 솔루션을 원합니다.
어떤 아이디어라도 감사합니다.
어때
ngOnInit(){
this._service.GetBars().contactMap(result => {
this.bars = result;
return this._service.GetFooBars();
}).subscribe(
data => {
this.foo.bars = data;
setSelected();
},
err => console.log(err)
)
}
setSelected(){
var roleSelect = document.getElementById("role-select");
this.foo.bars.forEach((v, i) => {
for (var j = 0; j < roleSelect.options.length; j++) {
if (roleSelect.options[j].text === v) {
roleSelect.options[j].selected = true;
}
}
});
}
그러나 setSelected 함수가 실제로 필요하지 않다고 생각합니다.
이론적으로는 ngModel이이를 처리해야합니다.
그렇지 않은 경우 템플릿에서 [selected]="bar===foo.bars"
<select id="role-select" class="form-control" [(ngModel)]="foo.bars" multiple>
<option *ngFor="let bar of bars" [selected]="bar===foo.bars">{{bars}}</option>
</select>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다