Question

这是我的表组件代码

<table class="table borderless">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Roll No</th>
      <th scope="col">Name</th>
      <th scope="col">Maths</th>
      <th scope="col">Physics</th>
      <th scope="col">Chemistry</th>
      <th scope="col">Biology</th>
      <th scope="col">Total_marks</th>
      <th scope="col">Percentage</th>
      <th scope="col">Division</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let student of students">
      <app-table-item [student]="student"></app-table-item>
    </tr>
  </tbody>
</table>

这是我的表项组件代码

<td>{{student.rollNo}}</td>
<td>{{student.name}}</td>
<td>{{student.maths}}</td>
<td>{{student.physics}}</td>
<td>{{student.chemistry}}</td>
<td>{{student.biology}}</td>
<td>{{student.total}}</td>
<td>{{student.percentage}}%</td>
<td>{{student.division}}</td>

问题出现在插入a之后的每次迭代中，然后是元素。因此，我将所有这些列都放在一列中。像rollno一样，名称等也会显示在rollno列本身下面。有什么想法可以在这里完成吗？

Answer 1

您正在生成无效的HTML。 <td>必须直接在<tr>下。您可能没有中间<app-table-item>元素。

坦率地说，如果你在app-table-item组件的模板中拥有这一切，那么这个组件可能是不必要的。如果您确实要保留它，请将其选择器更改为[app-table-item]，然后使用

<tr *ngFor="let student of students" app-table-item [student]="student">
</tr>

ngFor在tr上显示同一列中的数据

1 个答案: