How can I use an ngFor directive inside ng-content?-CodePudding

I'm trying to display an array of items using an angular material expansion panel and it's not displaying anything. I know the expansion panel uses ng-content to project content into the panel component. Here's what my template code looks like:

<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 >Record ID</span>
    <span >{{ record?.id }}</span>
    <span >Employee Number</span>
    <span >{{ record?.employeeNumber }}</span>
  </div>
</mat-expansion-panel>

CodePudding user response：

I just created a project using this component and it worked. Make sure you have imported the API of the component and material in the correct way. Check the package.json for Angular Material, along with any necessary dependencies. In case you have several modules and you have one for the Angular Material components, make sure you have exported the correct modules and then imported the module that contains the rest of the Material components. If you have more information about the problem it would be very useful

CodePudding user response：

I was able to solve my problem. It turned out there was an error with the array of data I was passing in.