typescript - Flera NgTemplate i angular 7

Jag har ett Angular 7-projekt. Och jag skrev <ng-template> och det skickar min rowData. När jag skrev en ng-template som nedan fungerade allt perfekt. Men jag behöver flera ng-template. Jag försökte något som nedan. Men jag kunde inte köra det. Hur kan jag uppnå detta?

Det här fungerar perfekt

app.grid.component.html

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of Columns" class="ui-resizable-column">
      <span>{{rowData[col.field]}}</span>
    </td>
    <td>
      <ng-template *ngTemplateOutlet="templateRef; context : {rowData : rowData}"></ng-template>
    </td>
  </tr>
</ng-template>

app.grid.component.ts

export class GridComponent implements OnInit {
    @ContentChild(TemplateRef) templateRef: TemplateRef<any>;
  }

mycomponent.html

 <app-grid>
   <ng-template let-rowData="rowData">
       <button type="button" label="Update" (click)="update(rowData)"
   </ng-template>
 </app-grid>

Men jag vill ha flera som nedan

app.grid.component.html

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of Columns" class="ui-resizable-column">
      <span>{{rowData[col.field]}}</span>
    </td>
    <td>
      <ng-template *ngTemplateOutlet="templateRef; context : {rowData : rowData}"></ng-template>
    </td>
    <td>
      <ng-template *ngTemplateOutlet="templateRef2; context : {rowData : rowData}"></ng-template>
    </td>
  </tr>
</ng-template>

app.grid.component.ts

export class GridComponent implements OnInit {
    @ContentChild(TemplateRef) templateRef: TemplateRef<any>;
    @ContentChild(TemplateRef) templateRef2: TemplateRef<any>;
  }

mycomponent.html

 <app-grid>
   <ng-template let-rowData="rowData" [ngForTemplate]="templateRef">
       <button type="button" label="Delete" (click)="delete(rowData)"></button>
   </ng-template>
   <ng-template let-rowData="rowData" [ngForTemplate]="templateRef2">
       <button type="button" label="Update" (click)="update(rowData)"></button>
   </ng-template>
 </app-grid>

Svar #1

Jag hittade svaret. Du kan se det från denna stackblitz-länk. (Denna stackblitz är inte exakt samma. Men logiken är exakt densamma.)

STACKBLITZ

Svar #2

Du bör använda @ContentChildren istället för @ContentChild

@ContentChildren(TemplateRef) tabs: QueryList<TemplateRef>;

Relaterade artiklar