Używam kątowego 7. Potrzebuję danych z dwoma Templatef dla moich dwóch kolumn. Ale moje kolumny nadchodzą jak puste. Co może być powodem? Dodałem ostateczną wersję, którą chcę malować na dole strony.

Mogę używać innych rzeczy zamiast ContentChild

STACKBLITZ

app.component.html

<app-grid >
  <ng-template let-rowData="rowData" #ColumnStudent>
    Student {{rowData}}
  </ng-template>
  <ng-template let-rowData="rowData" #ColumnTeacher>
    Teacher {{rowData}}
  </ng-template>
</app-grid>


<!--START painting of Final version that I want  -->
<h1 style="color:red">I want table like below in final </h1>

<table border="1">
    <tbody>
        <tr>
            <th> Students</th>
            <th> Teachers </th>
        </tr>
        <tr *ngFor="let name of ['Bob','Fred','Gary']">
            <td style='background-color:yellow'>Student {{name}}</td>
            <td style='background-color:lightgreen'>Teacher {{name}}</td>
        </tr>
    </tbody>
</table>
<!-- FINISH painting of Final version that I want -->

grid.component.html

<table border="1">
    <tr>
        <th> Students</th>
        <th> Teachers </th>
    </tr>
  <tr *ngFor="let name of ['Bob','Fred','Gary']">
    <td style='background-color:yellow'><ng-content *ngTemplateOutlet="ColumnStudent; context : {rowData : name}"></ng-content></td>
    <td style='background-color:lightgreen'><ng-content *ngTemplateOutlet="ColumnTeacher; context : {rowData : name}"></ng-content></td>
  </tr>
</table>

grid.component.ts

export class GridComponent implements OnInit {    
  @ContentChild('ColumnStudent') ColumnStudent: QueryList<ElementRef>;
  @ContentChild('ColumnTeacher') ColumnTeacher: QueryList<ElementRef>;

  constructor() { }
  ngOnInit() { }
}
0
realist 26 luty 2019, 10:08

2 odpowiedzi

Najlepsza odpowiedź

Dodaj lokalne odniesienie do szablonu (za pomocą #) do elementów wewnątrz HTML, który odnosi się do użycia @Contentchild w Component.ts

<app-grid >
  <ng-template let-rowData="rowData" #ColumnStudent>
    Student {{rowData}}
  </ng-template>
  <ng-template let-rowData="rowData" #ColumnTeacher>
    Teacher {{rowData}}
  </ng-template>
</app-grid>

Zobacz Zaktualizowany Stackblitz

1
Nandita Sharma 26 luty 2019, 07:28

W app.component.ts przegapiłeś, aby utworzyć zmienne odniesienia szablonu. Więc kątowy nie może wykryć, który szablon ng , na który wskazujesz, ponieważ masz wiele NG-szablony

<app-grid >
  <ng-template #ColumnStudent let-rowData="rowData">
    Student {{rowData}}
  </ng-template>
  <ng-template #ColumnTeacher let-rowData="rowData">
    Teacher {{rowData}}
  </ng-template>
</app-grid>
1
Bear Nithi 26 luty 2019, 07:38