爲什麼表格單元不能讀取父組件中的表格行？

Question

我有2個組件的位置：app.component.html和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> 

服務器element.component.html：

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

但結果卻是這樣，爲什麼？：

Answer 1

除其他人提出的問題 - 似乎還有另一個問題。您的<app-server-element *ngFor="let student of students" [student]='student'></app-server-element>充當細胞，因爲它是您的tr的直接子女。 app-server-element中的td元素不起作用。您可以在您的指令中使用替換來擺脫包裝 - 這樣td元素將是tr元素的直接子元素，並且它可以按預期工作。

編輯

收集有關您的問題的詳細信息後，請進行以下更改代碼：

更改server-element.component.ts到：

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() { 
     // 
    } 

} 

，改變selector: 'app-server-element'到selector: '[appServerElement]'。

更改app.component.html以下幾點：

<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

由於ANKIT建議需要迭代的<tr>：

<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> 

在app-server-element代碼迭代導致：當你想

<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> 

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