Currently, I am in the process of generating multiple divs while passing specific data to them. My objective is to hide certain divs based on particular conditions.
However, the issue I am facing is that all divs are being hidden regardless of the conditions that are set.
For instance, if I set "on: true" for one div, it ends up hiding all the divs. This might be due to the forEach loop that I am executing on all elements, but I am uncertain about how to resolve this problem.
Below is my TypeScript code:
export class ShowDataComponent implements OnInit {
@ViewChildren('notification') private el: QueryList<ElementRef>;
this.showData= arrayData;
ngAfterViewInit() {
for (let i = 0; i < this.showData.length; i++){
this.on = this.showData[i].on;
this.duration = this.showData[i].duration;
if(this.on){
this.el.forEach((element)=>{
const htmlElement = element.nativeElement as HTMLElement;
setTimeout(() => htmlElement.setAttribute("style", "display:none;"), this.duration);
});
}
}
}
}And here is my HTML code:
<div *ngFor="let n of showData">
<div #notification class="show-top-bar" style="display: block;">
{{n.message}}
</div>
</div>