Angular 17 选择错误 core.mjs:6531 错误错误：NG05105：发现意外的合成监听器 @transformPanel.done

Question

我有一个选择来控制似乎不起作用的列表。我在控制台中得到的错误是 core.mjs:6531 错误 错误：NG05105：发现意外的合成侦听器 @transformPanel.done。请确保：

• 将

  BrowserAnimationsModule

  或

  NoopAnimationsModule

  导入到您的应用程序中。

打字稿：

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>
  }

我已尝试导入有问题的模块，但仍然收到相同的错误或模块已包含的错误。

Answer 1

提供商

provideAnimations()

属于您的应用程序的根。无论是在

boostrapApplication

的配置中，或者如果您依赖于 AppModule，您应该导入

BrowserAnimationModule

。