CODEWITHSUNDEEP
angular
Akhil Biju
Akhil Biju

Reputation: 33

ngFor on tr displaying data in the same column

This is my table component code

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

And this is my table-item component code

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

The problem is in each iteration after the a is getting inserted and then the elements. Because of this i am getting all those columns in a single columns. Like rollno, name etc are getting displayed under the rollno column itself. Any ideas what can be done here ?

Upvotes: 0

Views: 427

Answers (1)

JB Nizet
JB Nizet

Reputation: 691635

You're generating invalid HTML. <td> must be directly under <tr>. You may not have an intermediate <app-table-item> element.

Quite frankly, if that's all you have in the template of the app-table-item component, this component is probably unnecessary. If you really want to keep it, then change its selector to [app-table-item], and use

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

Upvotes: 1

Related Questions