Question

在我的Angular应用程序中

我有一个使用ngFor循环显示在组件中的数组。

现在我从数组中过滤数据，并希望更新新更新的数组来代替原始数组

我可以在控制台上显示它，但是我没有设法在html文件中显示它。

.TS文件

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

.HTML文件

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

这是我设法显示数组但不过滤数据的方法。

Answer 1

这是解决您问题的方法

您应该首先用另一个变量引用实际的数组，然后对该数组应用过滤器。不要在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);
 }

}

您可以通过替换所有代码here

来运行此代码

Answer 2

请发布您的整个TS文件。在运行该filter方法之前，它可能与页面呈现有关。查看ionViewWillEnter（）生命周期方法。没有看到您的代码，我猜测将您的filter方法放到那里会正确呈现。

在Angular中显示动态过滤的数组

2 个答案: