checkbox - Angular 2: *ngFor の表示を動的に変更する方法は?

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ますか？もしそうなら、私が望む行動をするために私は何ができますか?

*ngIfandを使用して他の方法を試しましたgroupsMapが、どちらも機能しません。

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

いずれかの方法で解決策を見つけていただければ幸いです。どんな助けでも本当に感謝します、ありがとう!