Typescript Angular 17 Select 错误core.mjs：6531错误错误：NG 05105：发现意外合成监听器@transformPanel.done

我有一个 Select 可以控制一个似乎不起作用的列表.我在控制台中得到的错误是 core.mjs:6531错误错误:NG 05105:发现意外的合成监听器@transformPanel.done.请确保:

• BrowserAnimationsModule或NoopAnimationsModule将导入您的应用程序中.

Typescript :

import { Component } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { DatePipe } from '@angular/common';
import { MatListModule } from '@angular/material/list';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { provideAnimations } from '@angular/platform-browser/animations'; 
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';

export interface legend {
  name: string;
  image: string;
  tooltip: string;
}
export interface maplist {
  name: string;
  legends: Array<legend>
}



@Component({
  selector: 'app-legend',
  standalone: true,
  imports: [MatListModule, MatIconModule, MatDividerModule, DatePipe,
    MatSelectModule, MatTooltipModule, MatFormFieldModule, FormsModule, 
  ],
  providers: [
    provideAnimations()
  ],
  templateUrl: './legend.component.html',
  styleUrl: './legend.component.css',
})
export class LegendComponent {
  selectedValue: Array<legend> = [];

  maplistdata: maplist[] = [
    {
      name: "Echocondria",
      legends: [
        {
          name: "House",
          image: "",
          tooltip: "Living quarters for the residents."
        },
        {
          name: "Shop",
          image: "",
          tooltip: "Places to buy and sell goods."
        },
      ]
    },
    {
      name: "Echocondria Sewers",
      legends: [
        {
          name: "House",
          image: "",
          tooltip: "Living quarters for the residents."
        },
        {
          name: "Shop",
          image: "",
          tooltip: "Places to buy and sell goods."
        },
      ]
    },
  ]
}

Html:

  <mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select 
    color="primary"
    [(ngModel)]="selectedValue" name="legendselect"
  >
    <mat-option>None</mat-option>
    @for (legend of maplistdata; track legend) {
        <mat-option [value]="legend.legends">{{legend.name}}</mat-option>
    }
   </mat-select>
  </mat-form-field>

  @for (legenditem of selectedValue; track legenditem) {
  <mat-list-item>
  <mat-icon matListItemIcon>folder</mat-icon>
  <div matListItemTitle [matTooltip]="legenditem.tooltip"><img class="legendIcon" [src]="legenditem.image"/> {{ legenditem.name }}</div>
   <div matListItemLine>{{legenditem.tooltip}}</div>
</mat-list-item>
  }

我try 导入有问题的模块，但仍然得到相同的错误或模块已包含的错误.