是否在对象更改后更新ngFor？
在Angular中，ngFor是一个结构指令，用于在模板中循环渲染一组数据。当数据发生变化时，ngFor默认不会自动更新视图。但是，我们可以通过一些方式来实现在对象更改后更新ngFor。
一种常见的方式是使用不可变数据。不可变数据是指在更改数据时创建一个新的副本，而不是直接修改原始数据。这可以通过使用数组的slice()、concat()或扩展运算符(...)来实现。当我们使用不可变数据时，Angular会检测到数据的变化，并相应地更新ngFor的视图。
另一种方式是使用ChangeDetectorRef服务手动触发变化检测。ChangeDetectorRef是Angular提供的一个服务，它允许我们手动控制变化检测。我们可以在对象更改后调用ChangeDetectorRef的detectChanges()方法来通知Angular进行变化检测，并更新ngFor的视图。
除了以上两种方式，我们还可以使用trackBy函数来提高ngFor的性能。trackBy函数用于指定如何跟踪和识别循环中的每个项目。通过使用trackBy函数，Angular可以更准确地检测到对象的更改，并只更新受影响的部分。
总结起来，要在对象更改后更新ngFor，我们可以使用不可变数据、ChangeDetectorRef服务或trackBy函数来实现。这样可以确保ngFor能够正确地响应数据的变化，并更新视图。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器CVM：https://cloud.tencent.com/product/cvm
- 云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎TKE：https://cloud.tencent.com/product/tke
- 人工智能平台AI Lab：https://cloud.tencent.com/product/ailab
- 物联网平台IoT Hub：https://cloud.tencent.com/product/iothub
- 移动开发平台MPS：https://cloud.tencent.com/product/mps
- 云存储COS：https://cloud.tencent.com/product/cos
- 区块链服务BCS：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
我有一个函数，当项目被拖放时，它会更新对象属性。要么是因为我的函数错误，要么是因为我必须做一些其他的事情，因为这不起作用。显示不会更新 const dropId = event.nativeEvent.srcElement.id; }); this.results = this.results
浏览 4提问于2018-02-07得票数 1
因为最近，当你没有在每个*ngFor上实现trackBy-function时，Angular styleguide-lint-extender "Codelyzer“会抛出警告。为什么ngFor-指令要比较对象的标识值呢？在模块ng_for_of.d.ts中我可以找到_trackByFn。所以我假设return index-trackBy是默认配置？我真的应该在每个带有*ngFor的组件中实现return index;-function吗？
浏览 67提问于2017-12-16得票数 7
回答已采纳
1回答
我有组件并在循环(ngFor)中呈现它--组件有一个对象name: 'Bob'更改后，当组件发生更改时，它将其输入参数重置为初始状态，我希望获得处于其初始初始化场景中的值( -> @Input() a = {name: 'Bob'} (init value) -> )，然后执行一些操作.this.a.name = 'Alice'；->在循环中，对象再次<e
浏览 3提问于2022-01-12得票数 0
我有一个存储的对象文字，它根据用户的操作返回2个或更多的对象。然后根据它们是否完整来进一步过滤，因此通常有2个对象数组被发送到视图。在视图中，我执行了一个简单的ngFor ...它是保存在变量programsList中的完整列表的一部分
为了将项从in progress更改为complete，我需要更新</em
浏览 1提问于2017-02-16得票数 0
我正在通过传递对象，并根据对象属性更新表单输入。但是，当我更改表单输入的内容时，对象属性不会更新。text" [(ngModel)]="center.id">
<tr *ngFor="let center of cen
浏览 1提问于2018-02-08得票数 0
: 'even'" style="border-radius: 20px; border-style: solid; border-color: grey; margin-top: 10px;" *ngFor="let bull of bulls; let i = index;">
基本上，现在我已经创建了表，如果网页上的一些字段已被修改，我需要收集修改后的对象，并向数据库发出post请求以更新更改后的对
浏览 0提问于2020-10-28得票数 0
3回答
*ngFor的递减指数(角)
、、、、
使用角4.0.2，我有一个*ngFor创建输入元素，并通过add按钮更新一个对象数组，但是我试图弄清楚如何在从该数组中删除项目后更新对象的标识符。目前，我的ngFor看起来是：然后，删除按钮有一个(单击)事件：
浏览 4提问于2017-06-21得票数 0
回答已采纳
在视图中直接使用可观察对象时，请执行以下操作： <tr *ngFor="let device of devices$ | async"> 浏览器控制台显示错误： Error: ExpressionChangedAfterItHasBeenCheckedError如果改用组件成员变量，如： <tr *ngFor="let device of devices"> 定义如下： ngOnInit() {}
priva
浏览 13提问于2020-03-20得票数 0
我在angular中有一个thins应用程序，在我的一个组件中，我通过@Input() columns从父组件中获取了一些数据。但是，当我更改数据时，我的*ngFor不会更改。我已经检查了ngOnChanges(changes: SimpleChanges)中的更改，并且我已经尝试重新赋值，我使用了lodash和ChangeDetectorRef。ngF
浏览 0提问于2020-09-05得票数 0
修改对象的内部属性后，如下所示没有更新与ngFor的列表绑定。我发现更新列表的唯一方法是添加以下行太愚蠢了，还有什么其他的方式来迫使组件改版吗更新：
ngFor通过KeysPipe循环对象的属性。for
浏览 2提问于2016-09-06得票数 2
回答已采纳
我试图通过使用检测集合中的更改来了解IterableDiffers是如何在内部工作的。}
因此，从逻辑上说，如果集合包含对象，而这些对象的引用没有更改，则不会检测到
浏览 5提问于2019-12-11得票数 2
回答已采纳
1回答
我可以从firebase获取数据，但是在将数据添加到dropdown时遇到了一些问题。我可以在控制台上看到数据。我通过Firebase获取数据。="col-6"> <select class="form-select" >
<option *ngFor
浏览 16提问于2021-04-30得票数 0
回答已采纳
我有一个使用"*ngFor“循环显示的对象数组，当我调用array.sort()时，数组内部发生了变化，元素的位置/顺序也发生了变化，但angular没有检测到这些变化，也没有重新触发"ngFor”循环如何在调用排序函数后更新我的UI。
浏览 13提问于2020-04-11得票数 1
我使用*ngFor循环遍历对象数组，并在HTML中显示值。在HTML中，该值显示在输入元素中，因为我希望用户在需要时更改该值，然后使用Save按钮保存更改后的值。不幸的是，数据绑定根本不起作用。下面是我的代码：<td>
<input t
浏览 2提问于2020-03-16得票数 2
在我的应用程序中，有一个对象数组，其中的布尔属性可以更改。在此属性更改后，我将更改后的数组发送到subscribed组件的.next(changedData)。在订阅数据更改的组件中，我需要相应地过滤数据，并为*ngFor做好准备。 但是，我无法理解setter\getter方法的正确用法。我不想使用pipe，因为它们在很大程度上可能是低效的。_listFilter = filter;
浏览 20提问于2020-12-30得票数 0
单击“我的对象”后，我将组件更改为另一个组件以更新此对象。在这个用于更新的组件中，我有一个表单，它包含一个带有选项的select元素，这些选项应该使用数据库中的值(在OnInit方法中)进行初始化。默认情况下，我需要从这个值列表中选择我的对象的值。<select class="form-control" [(ngModel)]="client.clientId" >
<option&g
浏览 0提问于2018-02-22得票数 2
回答已采纳
this.mapTypes.normal.map);在添加上一行时在点击超链接不带我到新的网页。但是，如果我尝试右键单击超链接并在新选项卡中打开，效果会很好。<a *ngFor="let s of getSzValues(z.zones)" [ngClass]='active' href="/Detail
浏览 0提问于2019-03-31得票数 0
回答已采纳
我的angular应用程序遇到了一个问题，我使用input作为数组，并在click事件发生时将一个值推送到数组。但是当数组推送完成时，ngOnChanges不会触发。有没有办法解雇ngOnChange？@Component({ templateUrl: './app/modules/result.html' @Input() metas:any=[];
console
浏览 4提问于2017-04-05得票数 36
回答已采纳
'window:keydown.arrowdown', ['$event']) this.selected++;IsSelec
浏览 25提问于2020-09-02得票数 0
我有以下HTML代码：<tr *ngFor='let product of products'> <button [hidden]="hidebuttonFollow(productId: number) { this.hidebutton = true; }
单击一个产品的“跟随”按钮后，是否有任何方法隐藏、更新或更改
浏览 1提问于2016-08-17得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
