Angular 2将选定的属性绑定到动态创建的选项

时间:2016-07-08 14:07:45

标签: javascript angularjs typescript angular

我使用的是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中与bars匹配的所有选项中将foo.bars属性设置为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 []上不存在选项,我想要一个更强大的解决方案。

任何想法都表示赞赏。

1 个答案:

答案 0 :(得分:0)

怎么样

import pygame

pygame.init()
screen = pygame.display.set_mode((500, 500))
done = False

while not done:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            done = True

    state = pygame.key.get_pressed()
    if state[pygame.K_SPACE]:
        print("spacebar was pressed")
    if state[pygame.K_q]:
        done = True

pygame.quit()

但是,我认为你真的不需要setSelected函数。

理论上,ngModel应该注意这一点。

如果没有,您可以在模板中添加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; } } }); }

[selected]="bar===foo.bars"