Angular 2:更新数组时视图不更新
Angular 2是一种流行的前端开发框架，用于构建单页应用程序。在Angular 2中，当我们更新数组时，视图不会自动更新的问题可能是由于变更检测机制引起的。
Angular 2使用了一种称为"脏检查"的变更检测机制来监测数据模型的变化，并在必要时更新视图。然而，当我们直接修改数组中的元素时，Angular 2无法检测到这种变化，因为它只能检测到对数组的引用的变化。
为了解决这个问题，我们可以使用Angular 2提供的一些方法来更新数组，以便通知Angular 2进行变更检测并更新视图。以下是一些解决方案：
- 使用不可变性：不要直接修改数组中的元素，而是创建一个新的数组，并将修改后的元素添加到新数组中。这样，Angular 2就能检测到数组的引用发生了变化，并更新视图。可以使用JavaScript的
Array方法（如map、filter、slice等）来创建新数组。 - 使用
ChangeDetectorRef：ChangeDetectorRef是Angular 2中的一个服务，它可以手动触发变更检测。在更新数组后，可以调用ChangeDetectorRef的detectChanges方法来通知Angular 2进行变更检测并更新视图。需要在组件中注入ChangeDetectorRef服务。 - 使用
NgZone：NgZone是Angular 2中的另一个服务，它可以将代码运行在Angular的变更检测区域之外。在更新数组后，可以使用NgZone的run方法来运行变更检测代码，以确保视图能够正确更新。
综上所述，当我们在Angular 2中更新数组时，可以使用不可变性、ChangeDetectorRef或NgZone来解决视图不更新的问题。这些方法可以确保Angular 2能够正确检测到数组的变化并更新视图。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：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
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
2回答
Angular 2:更新数组时视图不更新
angular、angular2-changedetection
我有一个包含两个数组的组件。arrayA和arrayB。arrayB包含arrayA的过滤元素。我也有一个按钮：在doSomething方法中，我在arrayA上使用filter方法来更新doSomething() {}
问题是视图<
浏览 1提问于2017-07-05得票数 1
10回答
Angular2：*ngFor在更新数组时不更新
angular、angular2-changedetection
我有一个对象数组(让我们称之为arr)。在我的组件在(change)方法中的一个输入中，我修改了这些对象的一个属性，但是在视图(*ngFor)中没有任何改变。我看到Angular2更改检测没有检查数组或对象的内容，所以我尝试了以下方法：和但是视图没有改变在使用(change)的console.log()方法中，我得到了正确的数组。奇怪，但这个很管用：this
浏览 15提问于2017-07-21得票数 50
回答已采纳
2回答
Angular在数组推送时不更新视图
javascript、angular、typescript、ionic-framework、promise
该函数在其他组件上工作得很好，但在这个组件中，当我将新的post推送到数组中时，视图不会更新。"indexSection == 1" name="ellipse"></ion-icon>
浏览 61提问于2021-04-02得票数 1
回答已采纳
1回答
Angular2 :视图不更新
angular、angular2-template、materialize
这里还有另一个“不改变观点”的问题
因此，我想要直接显示按钮一旦我选择。
浏览 1提问于2017-06-14得票数 1
回答已采纳
1回答
Spring和eclipseLink刷新了吗？
java、mysql、spring、eclipselink
我遇到的问题是，在我通过web应用程序在数据库中插入、删除或更新数据后，mySQL数据库中的数据会被刷新，但当我返回到视图页面时，新数据不在那里，因此我必须重新启动整个程序才能显示新数据。如何刷新web应用程序以显示新插入、更新或删除的数据，而不必重新启动整个程序？
浏览 7提问于2017-08-23得票数 1
4回答
更新嵌套的$scope数组时，Angular.js视图不更新
javascript、angularjs、angularjs-scope、angularjs-ng-repeat
我正在尝试在添加评论时进行angular.js视图更新。<div class="row-fluid"> <img src="assets/img/samples/user2.jpg" alt="user2" />
</div
浏览 3提问于2013-04-16得票数 12
回答已采纳
4回答
Angular 2- NgFor不更新视图
javascript、angular、components、ngfor
我正在做angular 2项目，当我试图更改列表时，我遇到了一个问题。NgFor不识别更改，仅显示第一次加载的列表。
这是一个示例代码，当我加载所有列表时，在加载后立即用null重置它。视图仍显示所有列表...
浏览 2提问于2018-03-20得票数 3
2回答
Angular不更新视图
angularjs、angularjs-ng-repeat
我已经使用angular很长一段时间了，直到现在还没有遇到很多问题。我有一个控制器，它在发生ng-change事件时调用一个函数。它的视图在开始时被正确加载。我在视图中打印了该名称，但是当我从ng-change事件调用该方法时，该名称不会更改。我还在$scope.notas上执行了一个ng-repeat，但它不起作用。$digest()，但是错误
angular.js:14800 Error: [$rootScope:inprog] $apply already in progress
浏览 0提问于2018-03-12得票数 0
1回答
更新数组时，角度2不更新
angular
然后，它填充一个数组，该数组应提示angular使用*ngFor语句更新DOM，但它不起作用。代码如下： import {Injectable} from 'angular2/core'; }和Teachers
import {Component, AfterViewInit, OnInit, V
浏览 0提问于2016-01-05得票数 3
回答已采纳
2回答
抛出异常后，Angular 2不更新视图
angular、typescript、exception
当Angular 2的异常处理程序捕获到异常时，UI不再“更新”。我有一个非常简单的示例import { Component, ExceptionHandler, Injectable, OnInit, provide } from '@angular/core';import { Subject
浏览 0提问于2016-06-15得票数 11
1回答
角视图中的数组深度监视(html)
angularjs、watch
article", "icon": "fa fa-pencil" { "href": "/2-article",
"icon": "fa fa
浏览 3提问于2015-07-13得票数 0
回答已采纳
1回答
更新数据后，Angular不更新视图
angular、typescript、angular-services、angular-components
问题是，当我创建一个存储在数据库中的新列表时，我试图告诉"lister“更新它的视图，这样它就可以显示刚刚添加了什么。奇怪的是，它没有显示出来，即使我看到它自己的数据已经被更新并从数据库加载，但没有显示组件的视图。我在这里精简了一些代码。“制造者” import { Component, Inject, Input } from '@angular/core';
import { TranslateService } from '@ngx
浏览 21提问于2020-08-28得票数 0
3回答
从控制器调用服务更改时的角度不更新视图
javascript、angularjs、angularjs-directive、angularjs-scope、angularjs-service
当我在指令中使用控制器调用的服务更新主控制器中的数组(示例中为MyController)时，角不更新视图。如果您运行这个示例，您的想法是单击有色div，并更改由ng-重复循环打印的数组元素。$apply()，但是(a)没有起作用，(b)我的理解是，只有当我
浏览 2提问于2015-03-28得票数 2
回答已采纳
1回答
如何使用Aurelia观察数组中的数组？
arrays、aurelia、fomantic-ui
'1', ] { roles: [ '4' }
]我希望视图能够迭代并显示出来(例如，repeat.for="role of roles")。但是，当people数组更新时，视图不会更新。value
浏览 4提问于2021-02-18得票数 1
回答已采纳
3回答
如何强制子组件在父数据更改时重新加载其数据和视图
javascript、arrays、angular
我正在使用angular 4，虽然我曾经使用过Angular JS，但我对它还是有一点陌生的。我有一个父组件，它有一个对象数组在父组件中，用户通过它的视图修改人员数组 this.percent = this.person.percent;现在在父组件中
浏览 38提问于2018-01-28得票数 6
回答已采纳
2回答
异步模型更新时的Angular2更新视图
angular
我有一个依赖于数据存储的Angular2组件。模板在该存储上有一些数据绑定，例如，"{{datastore.weather.curTemp}}“数据存储get会通过http不时更新。现在我明白了这是以异步方式工作的-这就是当新数据到达时我的curTemp get不会自动更新的原因，对吧？
浏览 1提问于2016-08-20得票数 0
1回答
Angular2 ngFor在使用WebSockets时不更新视图
websocket、angular、dart、dart-html
我一直在处理angular2组件的问题。当我使用websockets时，视图不会更新。我尝试过使用http请求，它可以正常工作，但我需要更新视图中的数据。我可以使用websockets很好地连接到服务器，我可以接收数据，但是我的视图没有更新。 selector: "pv-table",
templateUrl: ".
浏览 2提问于2016-05-26得票数 2
回答已采纳
2回答
使用ngRepeat更改为父组件数组不会触发子$onChanges
angularjs、angularjs-ng-repeat、angularjs-components
items数组中的项应该在子控制器中调用$onChanges()。它按预期更新视图。$onChanges()为初始页面加载中的每一项触发，但对更改不触发。下面是我用来更新父数组的代码： var item = angular.copy(this.items[1]);}我最
浏览 2提问于2017-09-12得票数 2
1回答
Angular 5:视图不更新
angular、typescript、rxjs、observable
processSkills(skills: Skill[]): void {}
现在，即使this.skills已被填充，视图也不会更新
浏览 1提问于2017-12-08得票数 0
回答已采纳
1回答
在从另一个组件设置模型后不更新Angular2视图
javascript、arrays、angular、typescript、model
当我更新模型中的数组时，使用该模型的视图不会更新。当我控制台记录模型数组时，我可以看到模型正在更新，而不是视图。任何帮助都将不胜感激。下面请看一下我现在的情况。overview.component.tsimport { AppModel } from '..export cl
浏览 3提问于2017-03-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
