Warum liest die Tabellenzelle die Tabellenzeile in der Elternkomponente nicht?

Question

Ich habe 2 Komponenten hier: app.component.html und App-server.component.html

app.component.html

<table class="table" style="width:200px;"> 
     <tr> 
      <td>Names</td> 
      <td>Age</td> 

     </tr> 


    <tr><app-server-element *ngFor="let student of students" [student]='student'></app-server-element></tr> 

</table> 

Server-element.component.html:

<td class="column">{{student.name}}</td> 
<td class="column">{{student.age}}</td> 

aber das Ergebnis so ist, warum ?:

Answer 1

Zusätzlich <tr><app-server-element></app-server-element></tr> <tr><app-server-element></app-server-element></tr> <tr><app-server-element></app-server-element></tr> zu das Problem, das andere vorschlagen - es scheint ein anderes Problem zu geben. Ihr <app-server-element *ngFor="let student of students" [student]='student'></app-server-element> fungiert als eine Zelle, weil es ein direktes Kind Ihrer tr ist. Die td Elemente innerhalb app-server-element haben keine Wirkung. Sie könnten in Ihrer Richtlinie verwenden ersetzen loswerden der Wrapper zu bekommen - diese Weise das td Element ein direkter Nachkomme des tr Element sein würde und es würde wie erwartet.

bearbeiten

Nach mehr Informationen zu Ihrem Problem zu sammeln, benutzen Sie bitte die folgenden Änderungen an Ihrem Code machen:

Ändern der server-element.component.ts zu:

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: '[appServerElement]', 
    templateUrl: './server-element.component.html', 
    styleUrls: ['./server-element.component.css'] 
}) 
export class ServerElementComponent implements OnInit { 

    @Input() 
    appServerElement: { name: string, age: string }; 

    constructor() { 
     // 
    } 

    ngOnInit() { 
     // 
    } 

} 

und selector: 'app-server-element'-selector: '[appServerElement]' ändern.

Ändern der app.component.html auf die folgenden:

<table class="table" style="width:200px;"> 
    <tr> 
     <td>Names</td> 
     <td>Age</td> 
    </tr> 
    <tr [appServerElement]="student" *ngFor="let student of students"></tr> 
</table> 

Answer 2

Als ankit vorgeschlagen, dass Sie von <tr> iterieren müssen:

<table class="table" style="width:200px;"> 
    <tr> 
     <td>Names</td> 
     <td>Age</td> 

    </tr> 


<tr *ngFor="let student of students"><app-server-element *ngFor="let student of students" [student]='student'></app-server-element></tr> 

Code Iterierte über app-server-element die Ergebnisse:

<tr> 
<app-server-element></app-server-element> 
<app-server-element></app-server-element> 
<app-server-element></app-server-element> 
<app-server-element></app-server-element> 
</tr> 

während Sie wollen: