How To Clear An Aray After All It's Elemenets Have Been Rendered

My question is purely related to Angular/Typescript. I've an array whose elements I'm using printing on HTML page. the code is not ready yet. I've something like this: Typescript i

Solution 1:

*ngFor="let element of staticKpi"

iterates over staticKpi and displays the template for each element inside of that array;

The elements that are displayed are only the ones that are currently inside of the array, so if your intention is to keep them, you'd need to store the data in a separate array after each call and iterate over that array in the template;

Solution 2:

In JS Arrays and Objects keep their references. so if you pass the array among functions and one function edit the array all the references in others functions will be affected. so you need to create a new array.

Change this:

this.staticKpi.push(row);

for this :

this.staticKpi.push([...row]); // there you are creating a new array

now, you can do

row = []

and the copy of the array sent to staticKpi will keep equal

Solution 3:

If I get you correctly, you want this.staticKpi array to have 0 element anytime you call the initializeComponent method

import { Component, Input, NgZone, OnInit } from'@angular/core';
...

@Component({
    selector: '...',
    templateUrl: '...'
})
exportclassMyComponentimplementsOnInit {

    staticKpi = [];
    
    constructor() {
         //super(); // There is no need to do this. This component does not extends another component. 
    }

    ngOnInit(): void {
        this.initializeComponent();
    }

    privateinitializeComponent() {  
        // First clean the arraythis.staticKpi = [];  
         
        // Anytime you call initializeComponent method, @var row will always be an empty arraylet row = []; // For e.g. Apple, Banana, Mango, etc// Join the arrays together or just assign row to staticKpithis.staticKpi = [...this.staticKpi,...row];

    }
}