如果在 *ngFor 的子组件中使用，则没有 MatExpansionPanel 的提供者

Question

我想使用子组件将我的 mat-accordion 与每个 mat-expansion-panel 分开。

我的 app.component.html 看起来像这样：

<mat-accordion>
  <mat-expansion-panel *ngFor="let customer of customers">
    <app-customer [name]="customer"></app-customer>
  </mat-expansion-panel>
</mat-accordion>

我的子组件如下所示：

<mat-expansion-panel-header>
      {{ name }}
</mat-expansion-panel-header>

当我启动应用程序时，我在控制台中收到以下错误（并且没有显示任何内容）

Uncaught Error: Template parse errors:
No provider for MatExpansionPanel ("[ERROR ->]<mat-expansion-panel-header>
      {{ name }}
</mat-expansion-panel-header>
"): ng:///AppModule/CustomerComponent.html@0:0

我究竟做错了什么？如果我不使用子组件，它就可以正常工作

Answer 1

通过将其添加到组件声明中，这样做解决了我的问题。

@Component({
  selector: 'app-x',
  templateUrl: './app-x.html',
  styleUrls: ['./app-x.scss'],
  viewProviders: [MatExpansionPanel]
})