Я хочу создать вложенный "параметр-mat" в "mat-select"

Question

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

/** Example file/folder data. */
export const files = [
  {
    name: 'privatec-omponents',
    type: 'folder',
    date: '11/21/2020',
    kind: 'folder',
    size: '--',
    children: [
      {
        name: 'private-src',
        type: 'folder',
        date: '11/21/2020',
        kind: 'folder',
        size: '--',
        children: [
          {
            name: 'private-cdk',
            type: 'folder',
            date: '11/21/2020',
            kind: 'folder',
            size: '--',
            children: [
              { name: 'private-package.json', type: 'file', date:'11/21/2020',kind: 'json', size: '2MB' },
              { name: 'private-BUILD.bazel', type: 'file', date: '11/21/2020', kind: 'bazel', size: '2MB' },
            ]
          },
          { name: 'private-material', type: 'folder', date: '11/21/2020', kind: 'folder', size: '--' }
        ]
      }
    ]
  },
  {
    name: 'private-angular',
    type: 'folder',
    date: '11/21/2020',
    kind: 'folder',
    size: '--',
    children: [
      {
        name: 'private-packages',
        type: 'folder',
        date: '11/21/2020',
        kind: 'folder',
        size: '--',
        children: [
          { name: 'private-travis.yml', type: 'file', date: '11/21/2020', kind: 'yml', size: '2MB' },
          { name: 'firebase.json', type: 'file', date: '11/21/2020', kind: 'json', size: '2MB' }
        ]
      },
      { name: 'private-package.json', type: 'file', date: '11/21/2020', kind: 'json', size: '--' }
    ]
  }
];

Я хочу показать все имена папок как "mat-select", чтобы позволить пользователям выберите каталог файлов, чтобы сохранить их файлы, однако в настоящее время отображаются только родительские папки. Есть ли способ, которым я могу отобразить все папки в "mat-option"? Я также хочу добавить заполнение, если в папке есть родительская папка?

Так выглядит HTML.

<mat-form-field>
    <mat-label>Drirectry Name</mat-label>
    <mat-select name="fileName" [(value)]="selectedCountry" placeholder="Country">
      <mat-option *ngFor="let file of file" [value]="file.name">
        {{file.name}}
      </mat-option>
    </mat-select>
</mat-form-field>

Так выглядит в Интернете.

Как я могу их сделать?

Answer 1

Вы действительно хотите обернуть mat-option в mat-optgroup для любых вложенных значений

Пример :

<mat-select [formControl]="pokemonControl">
    <mat-option>-- None --</mat-option>
    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                  [disabled]="group.disabled">
      <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
        {{pokemon.viewValue}}
      </mat-option>
    </mat-optgroup>
  </mat-select>

См. Выбрать с помощью группы опций в документах: https://material.angular.io/components/select/examples