如何创建带分组的Angular 2多选下拉列表？

<mat-form-field>
  <mat-select [(ngModel)]="selectedOptions" multiple>
    <mat-select-trigger>
      {{ selectedOptions.length }} options selected
    </mat-select-trigger>
    <mat-optgroup *ngFor="let group of options" [label]="group.name">
      <mat-option *ngFor="let option of group.options" [value]="option.value">
        {{ option.name }}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

import { Component } from '@angular/core';

@Component({
  selector: 'app-multi-select-dropdown',
  templateUrl: './multi-select-dropdown.component.html',
  styleUrls: ['./multi-select-dropdown.component.css']
})
export class MultiSelectDropdownComponent {
  selectedOptions: string[] = [];
  options = [
    {
      name: 'Group 1',
      options: [
        { name: 'Option 1', value: 'option1' },
        { name: 'Option 2', value: 'option2' },
        { name: 'Option 3', value: 'option3' }
      ]
    },
    {
      name: 'Group 2',
      options: [
        { name: 'Option 4', value: 'option4' },
        { name: 'Option 5', value: 'option5' },
        { name: 'Option 6', value: 'option6' }
      ]
    }
  ];
}

<app-multi-select-dropdown></app-multi-select-dropdown>