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>