0

我想显示group在列表中具有属性的对象数组，并且能够根据用户的需要仅显示某个组的对象。

为了做到这一点，我有复选框来收集用户的愿望：

<div class="input-controls">
                <label>Select the group(s) you want to display:</label>
                <div *ngFor="#group of groups">
                    <label>
                        <input type="checkbox"
                               name="groups"
                               value="group"
                               [checked]="true"
                               (change)="updateSelectedGroups(group, $event)"/>
                        {{group}}
                    </label>
                </div>
            </div>

然后，我希望能够只显示group选择了它们的属性的对象。我首先尝试只显示选定的组：

Selected Group(s):
            <ul>
                <li *ngFor="#group of selectedGroups">
                    {{group}}
                </li>
            </ul>

我设法创建了一个selectedGroups对象，其中包含仅包含选定组的数组：

export class ListComponent {
        private groupsMap = {
            'Group A': true,
            'Group B': true,
            'Group C': true
        };
        private groups = ['Group A', 'Group B', 'Group C'];
        private selectedGroups: string[];

        constructor() {
            this.selectedGroups = ['Group A', 'Group B', 'Group C'];
        }

        updateSelectedGroups(group, event) {
            // groupsMap object is updated
            this.groupsMap[group] = event.target.checked;
            // selected groups are pushed into selectedGroups
            this.selectedGroups = [];
            for(var x in this.groupsMap) {
                if(this.groupsMap[x]) {
                    this.selectedGroups.push(x);
                }
            }
            console.log(this.selectedGroups);
        }
}

如图所示，我放了一个console.log(this.selectedGroups)来验证我的selectedGroups对象是否真的只包含我想要的选定组，并在选中/取消选中复选框时正确更新。它确实如此。

问题是，当我选中/取消选中或复选框时，所选组的列表不会在我的视图中更新。它卡住了，好像selectedGroups一直['Group A', 'Group B', 'Group C']都一样。

有谁知道为什么？它与 的行为有关*ngFor吗？如果是这样，我该怎么做才能拥有我想要的行为？

我尝试了另一种使用*ngIfand的方法groupsMap，但它也不起作用：

<ul>
    <li *ngFor="#group of groups">
        <span *ngIf="groupsMap[group]">{{group}}</span>
    </li>
</ul>

我很乐意以一种或另一种方式找到解决方案。任何帮助将不胜感激，谢谢！

4

0 回答 0