I use an HTTP Get request to get a list of notifications, the name could be misinterpreted because it is just a list of posts that is collected, it doesn’t change. The problem is that I use an array to collect all the notifications with an interface and it doesn’t display them.
If I use a button called test to check the content of the array I see that all the objects are in the array yet it doesn’t work. error message
The example under load more is an example of one notification and how it should look like (hardcoded)
example
Code overview.component.html
<div class="content-wrapper">
<div class="container-fluid">
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-bell"></i> Notifications
</div>
<div class="card-body">
<div class="list-group list-group-flush small">
<app-notification *ngFor="let notification1 of notifications" icon1="{{notification1.icon}}" message1="{{notification1.message}}"></app-notification>
<button mat-raised-button (click)="test()">test</button>
<a class="list-group-item list-group-item-action">Load more...</a>
</div>
</div>
</div>
</div>
</div>
<p *ngFor="let notif of notifications">{{notif.id}}</p>
Code overview.component.ts
export class OverviewComponent implements OnInit {
notifications : Notificatie[] = [];
constructor(private NotificationService: NotificationServiceService) { }
ngOnInit(): void {
this.NotificationService.getNotifications().subscribe((reponse => {this.notifications = Object.values(reponse)}));
}
test(){
console.log(this.notifications);
}
}
Code Notificatie Interface
export interface Notificatie {
id?:number;
message:string;
icon:string;
}
Code Notification Service
export class NotificationServiceService {
constructor(private http:HttpClient) { }
url = "http://www.mocky.io/v2/5be453402f00002c00d9f48f";
// Observable<Notificatie[]>
getNotifications(): Observable<Notificatie[]>{
return this.http.get<Notificatie[]>(this.url)
}
}