I am attempting to showcase a list of tuitions in a table with a separate component for each result in the list using *ngFor. However, the HTML is not rendering it properly.
console.log()accurately prints the data (list of tuitions) : View console log data- The elements tab in inspect displays generated
tr: See inspect element tab result - Despite this, the HTML fails to display 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();
[...]
}