Angular 2 Material Design多选下拉层次结构父选择状态

Question

我正在使用Material Design在Angular 2中创建一个多选下拉列表。数据元素中存在层次结构，我需要实现类似于典型树结构的父子选择逻辑，其中在选择父节点时，所有子节点都被选中并取消选择父节点，取消选择所有子节点。那部分对我来说很好。

但是，当选择部分子项列表时，我在显示父项状态时遇到问题。在那种情况下，我需要在父复选框中显示＆＃34; - ＆＃34;标志而不是空。我的实现的当前状态显示在快照中，其中父复选框显示为空。

相反，我需要它来展示这样的东西：

到目前为止我对HTML的代码如下所示：

<md-select multiple placeholder="Data" class="card-dropdown" [(ngModel)]="selectedDatas" (ngModelChange)="onChange($event)">
            <ng-container *ngFor="let data of datas; let i=index">
                <md-option [value]="data.modified_data" [ngClass]="'one-indent'">{{ data.modified_data + " - " + data.description }}</md-option>
                <ng-container *ngFor="let data of datas[i]?.children; let j=index">
                    <md-option [value]="data.modified_data" [ngClass]="'two-indent'">{{ data.modified_data + " - " + data.description }}</md-option>
                    <ng-container *ngFor="let data of datas[i]?.children[j]?.children">
                        <md-option [value]="data.modified_data" [ngClass]="'three-indent'">{{ data.modified_data + " - " + data.description }}</md-option>
                    </ng-container>
                </ng-container>
            </ng-container>
        </md-select>

有人可以指导我解决这个问题的正确方法吗？

提前致谢。