多选多级下拉框案例

忘了在哪儿找的啦

  viewValue: string[] = [];
  carProperties = [
    { value: 'Stereo' },
    {
      value: 'Radio',
      subProperties: [
        { value: 'Digital' },
        { value: 'FM' }
      ]
    }, { value: 'Child seats' },
    { value: 'Rear camera' }
  ];

  valueSelected(value: string): boolean {
    return this.viewValue.indexOf(value) !== -1;
  }

<div>
test

<mat-form-field>
    <mat-select [(value)]="viewValue" multiple>
        <ng-container *ngFor="let property of carProperties">
            <mat-option [value]="property.value">
                {{ property.value }}
            </mat-option>
            <div *ngIf="property.subProperties && valueSelected(property.value)">
                <mat-radio-group>
                    <mat-radio-button *ngFor="let subProperty of property.subProperties" [value]="subProperty.value" style="display: block; padding: 12px 12px 12px 32px;">
                        {{ subProperty.value }}
                    </mat-radio-button>
                </mat-radio-group>
            </div>
        </ng-container>
    </mat-select>
</mat-form-field>

</div>