Display dynamically filtered array in Angular

Question

In my Angular Application

I have an array that is displayed in the component using an ngFor loop.

Now I filter the data from the array and would like to update the newly updated array in place of the original array

I can display it on the console but I didn't manage to display it on my html file.

.TS file

 let arrayTesting = this.arrays.filter(x => x.data === this.data);
 console.log(arrayTesting);

.HTML file

<ion-item *ngFor="let array of arrays">

Here is the way i manage to display an array but without filtering my data.

Answer 1

Here is a solution to your problem

You should first reference your actual array with another variable and apply filter on that array. DO not bind the actual array in the HTML but the filtered one . Here is the code

html:

<button mat-button (click)="filterList()">Click me!</button>

<ul>
<ul  *ngFor="let item of filteredArray">{{item}}</ul>
</ul>

Ts file:

import {Component} from '@angular/core';

/**
 * @title Basic buttons
 */
@Component({
  selector: 'button-overview-example',
  templateUrl: 'button-overview-example.html',
  styleUrls: ['button-overview-example.css'],
})
export class ButtonOverviewExample {

 array: number[]=[];
 filteredArray:number[]=[];


 ngOnInit(){
   this.array.push(1);
      this.array.push(2);
         this.array.push(3);
            this.array.push(4);

     for(let i=0;i<this.array.length;i++){
        this.filteredArray.push(this.array[i]);
     }

 }

 filterList(){
   this.filteredArray=this.array.filter(x => x === 2);
 }

}

You can run this code by replacing all the code here

Answer 2

Please post your whole TS file. It likely has to do with the page rendering before that filter method is run. Look into the ionViewWillEnter() lifecycle method. Without seeing your code, it is my guess that putting your filter method in there will render correctly.