My template needs to display the text 'Passed' only if item.name === 'michael' is not true. The component receives data in an array called courses[] from its parent. There are two interfaces, Courses and Teachers, where each course ID has associated Teacher data.
Below is the code snippet:
@Input() courses[];
isRequired = false;
ngOnInit() {
for (const entry of this.courses) {
this.checkData(entry);
}
}
checkData(singleCourse: Courses): void {
this.someService.getTeacherDetails(singleCourse.id).subscribe(item => {
if (item.name !== 'michael') {
this.isRequired = true;
}
});
}
interface Courses {
id: number;
name: string;
price: number;
}
interface Teachers {
name: string;
address: string;
}
The variable isRequired, which sets true or false, does not seem to be functioning correctly. The method getTeacherDetails() returns an Observable<Teacher> using an HTTP request.
<tbody>
<tr *ngFor="let course of courses">
<td>
{{course.name}}
</td>
<td>
<span *ngIf="!isRequired"> Passed </span> // This part is not working as expected
</td>
</tr>
</tbody>