Angular 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                    
        });
}

现在，我要做的是在与foo.bars中的bars匹配的任何选项上将selected属性设置为true。 目前我使用这个：

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 []上不存在选项，我想要一个更健壮的解决方案。

任何想法表示赞赏。

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>