Checkbox 角度2：如何动态更改*ngFor的显示？

我希望在列表中显示具有

组

属性的对象数组，并且能够根据用户需要仅显示特定组的对象

为此，我设置了复选框来收集用户的愿望：

<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>

我已成功创建了一个

selectedGroups

对象，该对象仅包含选定组的数组：

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

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

始终等于

[“A组”、“B组”、“C组”]

有人知道为什么吗？它是否与

*ngFor

的行为有关？如果是这样，我能做些什么来达到我想要的行为

我尝试了另一种使用

*ngIf

和

groupsMap

的方法，但它也不起作用：

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

{{group}}

---

我很乐意找到一个解决办法，不管怎样。非常感谢您的帮助，谢谢

我不能复制。当我启用/禁用复选框时，所选的组会更新为OK，问题似乎是因为我的组件作为其他组件的指令包含在内。事实上，您的plunker工作得非常好，但是当我将代码复制粘贴到组件中时，仍然存在同样的问题。不过，当我将代码复制粘贴到我的主组件中时，它是有效的。Angular 2如何准确地处理指令中显示的事件和组件刷新？你知道我在哪里可以找到更多的细节，以及如何处理这个问题吗？非常感谢，冈特！您是否可以扩展plunker以反映您的问题，这样调试和制定解决方案就会容易得多。好的，我已经解决了问题，它来自我的代码的另一部分，该部分抛出了一个错误。我认为这与此无关，但我猜这个错误不知怎么地停止了我整个组件的执行。。。无论如何，非常感谢你的帮助，在很多问题上你都在帮助我，冈特，你是最棒的！：）很高兴听到您让它工作：）