为什么表格单元格没有读取父组件中的表格行？

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的直接孩子。 td内的app-server-element元素无效。您可以在指令中使用replace来摆脱包装器 - 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>