Отображать динамически фильтруемый массив в Angular

Question

В моем угловом приложении

У меня есть массив, который отображается в компоненте с помощью цикла ngFor.

Теперь я отфильтрую данные из массива и хочу обновить только что обновленноемассив вместо исходного массива

Я могу отобразить его на консоли, но мне не удалось отобразить его в моем html-файле.

.TS file

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

.HTML файл

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

Вот способ, которым мне удается отобразить массив, но без фильтрации моих данных.

Answer 1

Пожалуйста, опубликуйте весь файл TS.Скорее всего, это связано с рендерингом страницы до запуска этого метода фильтра.Посмотрите на метод жизненного цикла ionViewWillEnter ().Не видя вашего кода, я полагаю, что размещение метода filter будет правильно отображаться.

Answer 2

Вот решение вашей проблемы

Сначала вы должны обратиться к фактическому массиву с другой переменной и применить фильтр к этому массиву. НЕ связывайте фактический массив в HTML, но отфильтрованный. Вот код

HTML:

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

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

Ts файл:

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);
 }

}

Вы можете запустить этот код, заменив весь код здесь