Question

我想使用子组件将mat手风琴与每个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]
})

Answer 2

如果你想把它放在子组件中，你需要像这样将mat-expansion-panel添加到子组件中：

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

然后在您的子组件中：

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

如果在* ngFor的子组件内部使用，则没有MatExpansionPanel的提供程序

2 个答案: