CODEWITHSUNDEEP
htmlangulartypescript
Jaspreet Singh
Jaspreet Singh

Reputation: 1

Angular *ngFor with tr yields unexpected behavior

   <tr *ngFor="let company of [].constructor(3)">
     <td>
          {{companyDetails?.description}}
     </td>
   </tr>

Let companyDetails?.description be a large string, then the output for the above is here. Basically it appears row-wise instead of column-wise.

However, if I manually write the code i.e.

      <tr>
        <td>
          {{companyDetails?.description}}
        </td>
        <td>
          {{companyDetails?.description}}
        </td>
        <td>
          {{companyDetails?.description}}
        </td>
      </tr>

then I get the correct output like here

Also, using *ngFor with tr is also messing with the cell placement within the table.

Any help will be appreciated. Thanks in advance!

Upvotes: 0

Views: 32

Answers (1)

Mathew Berg
Mathew Berg

Reputation: 28750

You're repeating over your rows instead of your columns, change to this:

  <tr>
     <td *ngFor="let company of [].constructor(3)">
          {{companyDetails?.description}}
     </td>
   </tr>

Upvotes: 1

Related Questions