Угловой 2 Привязать выбранный атрибут к динамически созданным настройкам

Question

Я использую 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 на true для любых параметров, которые соответствуют bars в 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; 
     } 
    } 
}); 

Это отлично работает, но transpiler кидает ошибка говорят опции не существует на HTMLElement [] и я хотел бы немного более надежное решение.

Любая идея оценивается.

Answer 1

как о

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>