Angular 2 Material Design Multi-select Drop-down Hierarchy Parent Selection State

问题

I am working on creating a multi-select drop down in Angular 2 using Material Design. There is a hierarchy in the data elements and I need to implement the Parent-Child selection logic similar to a typical tree structure, wherein upon selecting the parent, all children get selected and de-selecting the parent, de-selects all children. That part is working fine for me.

However, I'm facing an issue in showing the state of parent when a partial list of children is selected. In that condition, I need to show in the parent checkbox a "-" sign instead of being empty. The current state of my implementation is shown in the snap shot wherein the parent checkbox is shown as empty.

Instead I need it to show something like this:

The code I have so far for the HTML is as shown below:

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

Can someone kindly guide me regarding the correct way of solving this problem?

Thanks in advance.

来源：https://stackoverflow.com/questions/44856434/angular-2-material-design-multi-select-drop-down-hierarchy-parent-selection-stat