Использование mat-option И mat-radio-button в списке выбора mat или mat-selection

Question

Я пытаюсь создать «многоуровневый» выбор матов, и я хотел бы использовать как флажки, так и переключатели.

Пример того, как его можно использовать для установки свойств автомобиля (при условии, что радио может быть только цифровым или FM):

• [v] Stero
• [v] Радио
• --- (о) Цифровой
• --- () FM
• [] Детские кресла
• [] Задняя камера

Переключатели должны появляться только в том случае, если выбрана опция «родитель», в данном случае «Радио».

<mat-form-field>
  <mat-select [(value)]="viewValue" #multipleSelect (openedChange)="onMultipleChange($event, multipleSelect.selected)" multiple>
    <ng-container *ngFor="let property of carProperties">

      <!-- If the property does not have any subProperties, display the property. Else display the nested options (subProperties) -->
      <mat-option *ngIf="!property.subProperties; else nestedOption" [value]="property.value">
        {{property.value}}
      </mat-option>
      <ng-template #nestedOption>
        <mat-checkbox #parentOption>
          {{property.value}}
        </mat-checkbox>
        <ng-container *ngIf="parentOption.checked">
          <ng-template #radioOptions>
            <mat-radio-group (change)="radioChange($event)"> <!-- Not sure what the ngModel should be here -->
              <mat-radio-button *ngFor="let subProperty of property.subProperties" [value]="subProperty.value">
                {{subProperty.value}}
              </mat-radio-button>
            </mat-radio-group>
          </ng-template>
        </ng-container>
      </ng-template>
    </ng-container>
  </mat-select>
</mat-form-field>

Я создал решение, но, выбрав переключатель, я получу следующее исключение:

"Значение должно быть массивом в режиме множественного выбора в getMatSelectNonArrayValueError (select.es5.js: 116) at MatSelect.push .. "

Я предполагаю, что это потому, что выбор циновки ищет изменения в его структуре, где размещены переключатели. Как я могу структурировать компоненты мата, чтобы получить желаемое поведение?

Answer 1

Я думаю, вы немного усложнили это. Вместо использования конструкции if-else просто скрывайте или отображайте флажки при наличии под-свойств. Вот упрощенная версия, которая должна работать:

<mat-form-field>
    <mat-select [(value)]="viewValue" #multipleSelect 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>

А в файле .ts:

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