预填充具有分组的Angular材料选择器

要在Angular材料选择器中预填充具有分组的选项，您可以使用ngModel和ngValue指令来设置默认选项。

首先，您需要创建一个包含分组的选项列表。您可以使用Angular材料的MatSelect组件和MatOption组件来创建这些选项。

接下来，您可以在模板中使用MatSelect组件来显示选择器，并使用MatOption组件来设置选项。

最后，您需要在组件中设置默认选项。您可以使用ngModel指令来设置默认选项的值，然后使用ngValue指令将该值与选项关联起来。

下面是一个预填充具有分组的Angular材料选择器的示例代码：

在组件中定义选项和默认选项：

options = [
  {
    groupName: 'Group 1',
    values: [
      { value: 'option1', label: 'Option 1' },
      { value: 'option2', label: 'Option 2' },
      { value: 'option3', label: 'Option 3' }
    ]
  },
  {
    groupName: 'Group 2',
    values: [
      { value: 'option4', label: 'Option 4' },
      { value: 'option5', label: 'Option 5' },
      { value: 'option6', label: 'Option 6' }
    ]
  }
];

defaultOption = 'option2';

在模板中使用MatSelect和MatOption组件：

<mat-form-field>
  <mat-select [(ngModel)]="defaultOption">
    <mat-optgroup *ngFor="let group of options" [label]="group.groupName">
      <mat-option *ngFor="let option of group.values" [value]="option.value">
        {{ option.label }}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

在上面的示例中，options数组包含两个分组（Group 1和Group 2），每个分组都包含一组选项。defaultOption变量设置为默认选项的值（在此示例中为'option2'）。

这样，当选择器加载时，它将自动预填充为默认选项，并且也可以根据用户的选择进行更改。