Question

我想显示一个列表中具有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的行为有关吗？如果是这样，我该怎么做才能得到我想要的行为？

我尝试了使用*ngIf和groupsMap的其他方法，但它既不起作用：

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

我很乐意以某种方式找到解决方案。非常感谢任何帮助，谢谢！

Angular 2：如何动态更改* ngFor的显示？

0 个答案: