Question

我正在开发一个Web应用程序，并具有一个类似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中以获取任何嵌套值

Example：

<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

我想在“ mat-select”中创建嵌套的“ mat-option”

1 个答案: