如何在 ng-content 中使用 ngFor 指令？答案

【问题标题】：How can I use an ngFor directive inside ng-content?如何在 ng-content 中使用 ngFor 指令？
【发布时间】：2021-12-29 21:49:17
【问题描述】：

我正在尝试使用有角度的材质扩展面板显示一组项目，但它没有显示任何内容。我知道扩展面板使用 ng-content 将内容投影到面板组件中。这是我的模板代码的样子：

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title> This is the expansion title </mat-panel-title>
    <mat-panel-description>
      This is a summary of the content
    </mat-panel-description>
  </mat-expansion-panel-header>
  <div *ngFor="let record of records">
    <span class="detail-label">Record ID</span>
    <span class="detail-value">{{ record?.id }}</span>
    <span class="detail-label">Employee Number</span>
    <span class="detail-value">{{ record?.employeeNumber }}</span>
  </div>
</mat-expansion-panel>

【问题讨论】：

检查 content projection 角度的动态数据
@akkonrad 正如我在帖子中所说，mat-expansion-panel 在幕后使用 ng-content 来投影 body 的内容，这是我现在拥有我的 div 数组的地方。跨度>

标签： angular angular-material ngfor angular2-ngcontent

【解决方案1】：

我刚刚使用这个组件创建了一个项目并且它工作正常。确保您以正确的方式导入了组件和材料的 API。检查 Angular Material 的 package.json 以及任何必要的依赖项。如果您有多个模块并且有一个用于 Angular Material 组件，请确保您已导出正确的模块，然后导入包含其余 Material 组件的模块。如果您有更多有关该问题的信息，那将非常有用

【讨论】：

【解决方案2】：

我能够解决我的问题。原来我传入的数据数组有错误。

【讨论】：