在agnular2中绑定多选选项

时间:2017-01-26 22:51:04

标签: rest angular

这里有人可以告诉我如何绑定多选吗?我从数据库(REST)获取数据,使用这部分代码(以编辑形式)我预先分类并添加所选属性:

for (let i = 0; i < this.group.categories.length; i++) {
                    for (let j = 0; j < this.categories.length; j++) {
                        if (this.group.categories[i].id == this.categories[j].id) {
                            this.categories[j].selected = true;
                        }
                    }
                }

在模板中有这个:

<label class="form-group">
                            Select categories:
                            <select [(ngModel)]="group.categories" name="categories" class="form-control" required multiple>
                                <option *ngFor="let c of categories" value={{c.id}} [selected]="c.selected">
                                    {{c.title}}
                                </option>
                            </select>
                        </label>

如果我检查元素,我看到angular将它们的值设置为选中,但没有向用户显示选择的选择框项目。 我究竟做错了什么?我没有找到任何解决方案所以问你。我希望你能帮助我。

1 个答案:

答案 0 :(得分:0)

我希望有人能提供帮助。

需要从具有特定对象的类别创建数组:

let selected_categories = [].slice.call(this.group.categories).map(a => a.id);

然后将其添加到组对象:

this.group.categories = selected_categories;

然后将其绑定在模板中:

<select multiple name="categories" [(ngModel)]="group.categories" class="form-control" >
                            <option *ngFor="let c of categories" [value]="c.id">
                                {{c.title}}
                            </option>
                        </select>

那就是:)享受:)