如何重新计算筛选数组上的ngFor？
在Angular中，ngFor是一个结构指令，用于在模板中循环渲染数组或可迭代对象的元素。当数组发生变化时，ngFor默认会重新计算和更新渲染的元素。然而，有时候我们需要手动触发ngFor的重新计算和筛选。
要重新计算筛选数组上的ngFor，可以采取以下步骤：
- 创建一个新的数组或对现有数组进行修改，以满足筛选条件。这可以通过使用JavaScript的数组方法（例如filter、map等）来实现。
- 将新的数组赋值给原始数组，以触发ngFor的重新计算和更新。确保在赋值时使用不可变性原则，即创建一个新的数组对象而不是修改原始数组对象。
下面是一个示例代码，演示如何重新计算筛选数组上的ngFor：
在组件类中定义一个原始数组和一个筛选后的数组：
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<div *ngFor="let item of filteredItems">
{{ item }}
</div>
`
})
export class ExampleComponent {
items: string[] = ['item1', 'item2', 'item3', 'item4'];
filteredItems: string[] = [];
filterItems() {
// 根据筛选条件过滤原始数组
this.filteredItems = this.items.filter(item => item.includes('item'));
}
}在模板中使用ngFor指令来循环渲染筛选后的数组。
在组件类中，通过调用filterItems()方法来重新计算筛选数组：
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<button (click)="filterItems()">重新计算筛选数组</button>
<div *ngFor="let item of filteredItems">
{{ item }}
</div>
`
})
export class ExampleComponent {
items: string[] = ['item1', 'item2', 'item3', 'item4'];
filteredItems: string[] = [];
filterItems() {
// 根据筛选条件过滤原始数组
this.filteredItems = this.items.filter(item => item.includes('item'));
}
}当点击"重新计算筛选数组"按钮时，将会触发filterItems()方法，重新计算筛选数组并更新ngFor的渲染结果。
这是一个简单的示例，你可以根据实际需求和筛选条件进行修改。此外，你还可以结合其他Angular特性和功能，如订阅数据变化、使用管道等，来实现更复杂的筛选和重新计算逻辑。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库MySQL版、腾讯云人工智能服务等。你可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
我想在不同的选项卡中显示它们，当用户单击相应的按钮时，更改状态，从而更改选项卡所在的位置。> <app-tweet *ngFor="let tweet of campaign.tweets[tweet]="tweet"></app-tweet>
</m
浏览 5提问于2018-02-03得票数 0
回答已采纳
2回答
我有一个在模板中包含*ngFor的列表： {{product.name}}</li>
因此，我使用filterProducts管道来筛选
浏览 5提问于2020-03-05得票数 0
回答已采纳
2回答
我有一个包含一系列织物的Angular2网格。这些织物具有颜色或织物类型等性能。现在，网格已经显示了它们。我需要一些如何有一系列的颜色和织物类型的复选框与数量发生在它旁边。只有在单击“应用过滤器”按钮后，网格才会显示过滤过的织物。但是，当选中复选框时，其他复选框会计数更改。
有人能提供一些洞察力作为最好的解决办法吗？我现在有所有的数据。**模型**
ProductConfigurationOption是选项选择的总体父级。例如。织物是一种Configu
浏览 1提问于2017-07-24得票数 4
回答已采纳
我在数组上使用ngFor进行迭代。我想按下另一个按钮，它将根据数组中数组对象foo{bar:'New'}的特定属性过滤该数组。我想使用NgFor进行初始填充，并使用事件进一步过滤。这有可能吗？数组中的对象 artist:'Foo', linker:'./a
浏览 3提问于2017-12-02得票数 0
回答已采纳
2回答
在excel表中，当我在一列上设置filter时，它会过滤另一列的无关筛选器选项，等等。
但是，我需要知道Excel使用什么算法来完成这个任务，以及是否有任何JS实现。在应用新筛选器时，我试图更新每一列的唯一值列表，但使用这种方法，我会在前一筛选器列上丢失未选择的选项。不知何故，Excel设法留住了他们。这个问题看起来很相似，但是它询问具体的实现，我需要的是算法，或者至少是它的名称：。当前实现的伪代
浏览 0提问于2018-03-02得票数 4
回答已采纳
1回答
是否可以在数组(如购物车行项对象)上使用| where筛选器按属性值进行筛选。
例如，我希望找到property._design_id为123的所有行项。我知道，我也可以使用for循环& if语句来实现这一点，然而，这是几行代码&我可以在每次需要使用这些项时重用数组，而无需重新计算。
浏览 8提问于2022-08-16得票数 1
回答已采纳
所以我有这样一个场景(简化)
主组件列表组件html
<li *ngFor当月份值发生变化时，应该如何安排getAllByMonth得到的调用一次？
浏览 0提问于2018-05-29得票数 0
回答已采纳
1回答
this.errorMessage = <any>error);
<thead> {{key}} </thead> <tr *ngFor</
浏览 3提问于2017-08-16得票数 2
回答已采纳
1回答
我正在构建chat app...while init我正在检查消息并存储在消息数组中的聊天页面 ngOnInit() { userId });<ion-content> <ion-item *ngFor它一直在循环，直到我退出应用程序并删除防火墙中的消息。
我在
浏览 0提问于2019-09-21得票数 0
回答已采纳
我有一个有角度的应用程序，显示了一个名字列表。我有一个搜索输入来过滤那个列表。="searchStr" (ngModelChange)="modelChange($event)" type="text" id="employeeName">
该组件具有modelChange()的逻辑，用于捕获输入字符串并根据该字符串筛选我的名称。这些数据最初来自ngInit()中调用的服务。我的问题是，每次在输入框中输
浏览 4提问于2020-07-07得票数 0
回答已采纳
我创建了一个文本框和一个数组。我想根据文本框值过滤数组项。Search Tickets" <li class="selectlistticket" *ngFor| SearchfilterPipe: searchfav)" (mouseover)="showfavstar(fav)"
浏览 4提问于2017-06-07得票数 0
我想显示数组的一些元素。在使用管道过滤数组时，更新数组不会在DOM中得到反映，如下代码所示。selector: 'my-app', <button (click)="change()">Change 3 to 10</button>
<ul> <li *ngFor="#n of numbers | myPipe">{{n}}</l
浏览 1提问于2016-02-01得票数 2
回答已采纳
1回答
在HTML中，当我<<variable>>我的对象时，我得到“对象对象”作为我的输出。当我做标准ng-repeat="o in variable"时，我什么也得不到。我的问题是如何循环遍历它，以便获得存储在该对象中的值。
浏览 1提问于2017-03-31得票数 2
回答已采纳
我试图通过使用检测集合中的更改来了解IterableDiffers是如何在内部工作的。}
因此，从逻辑上说，如果集合包含对象，而这些对象的</
浏览 5提问于2019-12-11得票数 2
回答已采纳
2回答
如何在离子交换中实现搜索和过滤
、、、、
我从项目中本地存储的JSON文件中获取数据。JSON字符串是一个位置数组，其结构如下所示：{ { });filterLocations()函数将接受searchTerm，并返回一个只包含匹配搜索条件的元素的数组ion
浏览 3提问于2017-10-16得票数 7
回答已采纳
2回答
在我的Angular应用中 我有一个使用ngFor循环显示在组件中的数组。现在，我从数组中筛选数据，并希望更新新更新的数组，以取代原始数组 我可以在控制台上显示它，但我没有设法在我的html文件中显示它。arrayTesting = this.arrays.filter(x => x.data === this.data);
console.log(arrayTesting); .HTML文件 <ion
浏览 14提问于2019-01-18得票数 1
回答已采纳
2回答
Angular中有没有像ngFor一样声明变量的功能？ 我想减少对相同值的调用和计算。对于getFormatString，我也可以使用下面的getValue()方法。但我想优化性能。value = getValue()"> <p item-end>{{ getFormatString(value) }}</p>
</ion-item> 实际上，我必须设置相同<em
浏览 24提问于2019-01-27得票数 0
在使用ng-for时如何过滤元素？of columns" ><a (click)="sort(col.name)">{{col.title}}</a></td>当col.visible为false时，我不想创建元素
我如何在
浏览 1提问于2015-07-13得票数 0
因此，正如您所看到的，我只需要从_settings.features属性中获取已启用并标记为状态栏兼容的特性。
这是因为每次传递的_.filter()都返回数组的新实例，但是集合是相同的。我的问题是，你是怎么解决这种情况的？或者可能有另一种解决方案/方法来处理这种情况。在我看来，如果angular
浏览 9提问于2016-02-13得票数 4
回答已采纳
2回答
我的Ionic角模板中有*ngFor属性，它打印数组属性的所有对象。问题是，这个数组可以改变，拥有更多的元素，甚至更新已经存在的对象的一些属性。因此，我每1秒使用rxjs向服务器请求数组，订阅它并再次将服务器响应重新分配到array属性。
上面提到的结果是，视图每秒钟重新呈现一次，从而导致数据在屏幕上不断出现和消失。我知道更新数组的</e
浏览 0提问于2019-08-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
