有任意数量的内容投影

时间:2019-03-21 09:47:36

标签: angular

当您知道与ng-content一起“接收” select的内容是您的朋友时,here的技术就会被很好地理解和描述。

但是如何使用类似Material table的技术,其中ng-contents / columns的需求量对于组件<mat-table>是未知的?

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- FIRST CONTENT -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

<!-- SECOND CONTENT -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

...

<!-- AAAND Nth content -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

很明显,有matColumnDef跟踪内容量。

我正在寻找一种方法,将n数量的<mat-expansion-panel>投射到一个<mat-accordion>

所以代码看起来像这样:

<cool-accordion-comp>

  <ng-container coolPanelTitle="title of panel 1">
    // content of panel 1
  </ng-container>

...

  <ng-container coolPanelTitle="title of panel N">
    // content of panel N
  </ng-container>

</cool-accordion-comp>

0 个答案:

没有答案