Issue at hand: Whenever I launch this component, the ngFor div continuously updates and causes my RAM to deplete. Typically, ngFor is triggered when the array is updated; however, in my case, the array (announcements) only updates once in the constructor. I am utilizing two ngFor divs:
<mat-tab label="Classroom">
<div *ngFor="let announcement of announcements">
<mat-card class="example-card">
<mat-card-header>
<mat-card-subtitle>{{"Announcement: " + announcement.text}}</mat-card-subtitle>
</mat-card-header>
<mat-card-footer>
<div *ngFor="let comment of loadComments(announcement)">
<mat-card class="example-card comment">
<mat-card-header>
<mat-card-subtitle>{{"Comment: " + comment.text}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
</mat-card>
</div>
</mat-card-footer>
</mat-card>
</div>
</mat-tab>
ts file:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { environment } from 'src/environments/environment';
import { Announcement } from '../model/announcement';
import { Classroom } from '../model/classroom';
import { User } from '../model/user';
import { Comment } from '../model/comment';
import { ClassroomService } from '../service/classroom.service';
import { CommentService } from '../service/comment.service';
import { AnnouncementService } from '../service/announcement.service';
@Component({
selector: 'app-view-classroom',
templateUrl: './view-classroom.component.html',
styleUrls: ['./view-classroom.component.css']
})
export class ViewClassroomComponent implements OnInit {
announcements: Announcement[] | undefined;
comments: Comment[] | undefined;
constructor(private classroomService: ClassroomService,
private commentService: CommentService,
private announcementService: AnnouncementService,
private formBuilder: FormBuilder)
{
this.classroomService.getClassroomUsers(JSON.parse(localStorage.getItem(environment.classroom) || ''), 'teachers').subscribe(
(response: User[]) => this.teachers = response);
this.classroomService.getClassroomUsers(JSON.parse(localStorage.getItem(environment.classroom) || ''), 'students').subscribe(
(response: User[]) => this.students = response);
this.classroomService.getClassroomOwner(JSON.parse(localStorage.getItem(environment.classroom) || '')).subscribe(
(response: User) => this.owner = response);
this.classroom = JSON.parse(localStorage.getItem(environment.classroom) || '');
this.announcementService.getAnnouncementsByClassroom(JSON.parse(localStorage.getItem(environment.classroom) || '')).subscribe(
(response: Announcement[]) => this.announcements = response);
}
ngOnInit(): void {
}
loadComments(announcement: Announcement){
let an = announcement;
this.commentService.getCommentsByAnnouncement(an).subscribe(
(response: Comment[]) => this.comments = response);
return this.comments;
}
}
However, the problem disappears when I remove the internal ngFor loop. What steps should I take to resolve this?