Angular 8+ *ngFor not displaying data in html even though console.log() prints the data correctly

Question

i am trying to display a list of tuitions in a table with separate component for each result in the list using *ngFor, but html is not displaying it.

console.log() prints the data(list of tuitions) correctly : console log data
Also the elements tab in inspect shows generated tr : inspect element tab result
But html is not displaying the list : empty table

Code:

parent html file

<div class="card">
            <h5 class="p-2 py-3">Find Tuitions By ID</h5>
            <table class="table table-responsive-sm">
                <thead class="thead-light font-weight-bold">
                    <tr>
                        <td scope="col">Tuition Id</td>
                        <td scope="col">Tuition Name</td>
                        <td scope="col">Classes</td>
                        <td scope="col">City</td>
                        <td scope="col">Action</td>
                    </tr>
                </thead>
                <tbody class="w-100">

                    <tr class="" app-tution-table-list-row *ngFor="let tution of searchedTuitions" [tution]='tution'
                        (viewEvent)='viewEvent($event)'>
                    </tr>

                </tbody>
            </table>
        </div>

child html tution-table-list-row.html file

<td scope="col" class="text-danger">{{tution.tutionId}}</td>
<td scope="col">{{tution.tutionName}}</td>
<td scope="col">{{tution.listOfClasses}}</td>
<td scope="col">{{tution.teacher.city}}</td>
<td>
    <div class="row">
       <div class="col-6">
        <button class="button btn btn-sm btn-danger my-1" routerLink="/verification-page"
            [queryParams]="{id: tution.teacher.userId}">View</button>
       </div>
    </div>
</td>

tution-table-list-row.ts file

@Component({
  selector: 'app-tution-table-list-row',
  templateUrl: './tution-table-list-row.component.html',
  styleUrls: ['./tution-table-list-row.component.css']
})
export class TutionTableListRowComponent {
    @Input('tution') 
    tution: Tution;
    @Output()
    viewEvent = new EventEmitter();

    [...]

}

may you show me a picture of you console.log output?? – Nederxus Apr 17 '21 at 23:00 — Nederxus, Apr 17 '21 at 23:00

Xie Dongfeng · Answer 1 · 2021-04-18T02:24:39.483

1

The way your use your child component is wrong.

The tr element in parent HTML file should be

<tr class=""  *ngFor="let tution of searchedTuitions">
      <app-tution-table-list-row [tution]='tution'></app-tution-table-list-row>
</tr>

And I suggest you move tr element to the child component.

edited Apr 18 '21 at 02:24

answered Apr 18 '21 at 01:58

Xie Dongfeng

131
3

thanks :), i tried the solution, but this solution causes entire to be forced into single column. using attribute selector solved the problem – SATYAJIT PATIL Apr 18 '21 at 12:09

score 1 · Accepted Answer · answered Apr 18 '21 at 10:18

You are using an element-selector in your TutionTableListRowComponent component. So, if you want to display that component you will have to use:

<app-tution-table-list-row></app-tution-table-list-row>

And not :

<tr app-tution-table-list-row></td>

If you want your component to be used like that, you need to update your selector to be an attribute selector that way (notice the [ ] around the selector) :

@Component({
  selector: '[app-tution-table-list-row]',
  templateUrl: './tution-table-list-row.component.html',
  styleUrls: ['./tution-table-list-row.component.css']
})

Here is a link to a similar question in stackOverflow

score 0 · Answer 3 · answered Apr 17 '21 at 22:35

0

Just use the component selector like a html tag. e.g:

<app-tution-table-list-row 
  *ngFor="let tution of searchedTuitions" 
  [tution]='tution'
  (viewEvent)='viewEvent($event)'>
</app-tution-table-list-row>

answered Apr 17 '21 at 22:35

David B.

695
5
10

causes entire to be forced into single column, using attribute selector solved the problem, thanks – SATYAJIT PATIL Apr 18 '21 at 12:11

Angular 8+ *ngFor not displaying data in html even though console.log() prints the data correctly

3 Answers3