更新零部件成员不会刷新Angular中的视图
在Angular中，当我们更新组件的成员变量时，Angular并不会自动刷新视图。这是因为Angular采用了变化检测策略来提高性能，只有在特定的情况下才会触发视图的更新。
默认情况下，Angular使用的是"检测到变化就更新"的变化检测策略，也称为默认策略。在这种策略下，Angular会在每个组件的变化检测周期中检查组件的所有成员变量，并比较它们的值是否发生了变化。如果发现有变化，Angular会更新相应的视图。
然而，当我们更新组件的成员变量时，并不会触发视图的更新，这是因为Angular默认只会检查引用的变化，而不会检查对象内部的属性变化。换句话说，如果我们只是更新了对象内部的属性，而没有改变对象的引用，Angular并不会认为这是一个变化。
为了解决这个问题，我们可以使用Angular提供的ChangeDetectorRef服务来手动触发变化检测。ChangeDetectorRef服务提供了一些方法，如markForCheck()和detectChanges()，可以告诉Angular重新检查组件的变化并更新视图。
另外，我们还可以使用@Input装饰器来监听输入属性的变化。当父组件更新了输入属性时，Angular会自动触发变化检测并更新子组件的视图。
总结起来，要在Angular中更新零部件成员并刷新视图，可以采取以下步骤：
- 使用ChangeDetectorRef服务，在更新成员变量后调用markForCheck()或detectChanges()方法来手动触发变化检测和视图更新。
- 使用@Input装饰器来监听输入属性的变化，当父组件更新输入属性时，Angular会自动触发变化检测和视图更新。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
相关·内容
我使用Angular 9.17，并且我有一个按钮，它执行一个函数来设置组件中的布尔值。在我的HTML模板中，我有一个基于这个布尔值的*ngIf条件，但是视图不会更新。有人能解释一下为什么Angular没有检测到这种变化吗？= true; this.loggedIn = false;
浏览 8提问于2020-06-18得票数 0
如果改用组件成员变量，如： <tr *ngFor="let device of devices"> 定义如下： ngOnInit() {} .subscribe((devices: Array<Device>) => { });
} 则所述错误不会出现成员变量的声明方式如下： devic
浏览 13提问于2020-03-20得票数 0
初始视图是一个登录组件。一旦用户登录，他们就会被重定向到"home“组件。Home零部件有一个顶部工具栏，以及一个sidenav。sidenav包含用户可以点击的链接。当点击链接时，sidenav似乎没有完全完成“高亮”动画，但似乎刷新了整个页面。这在StackBlitz示例中进行了说明，当在两个链接之间单击时，您可以看到动画停止/刷新。感谢您的任何意见。 链接到StackBlitz https://stackblitz.com/edit
浏览 14提问于2021-07-16得票数 0
回答已采纳
1回答
VueJS警告避免直接更改道具
、、、、
当我尝试使用@click指令更改某个属性的值时，会收到此警告：我的代码如下：<head></head><div id="app"Ca
浏览 1提问于2018-09-02得票数 0
5回答
我有两个组件，假设Component A是一个列表视图，Component B是一个详细视图。列表视图中的每一行都是可单击的，并且在单击时将重定向到Component B。我已经向Component B添加了一个Back按钮，以允许我返回到列表视图。
但我遇到的问题是，我看不到更新的列表视图，必须手动刷新浏览器，然后才能看到更新后的列表。public back()
浏览 0提问于2018-05-15得票数 1
2回答
我用Angular做了一个离子应用程序，我需要用物理条形码阅读器读取条形码。在我的页面(Ionic Page，一个angular组件)的TypeScript文件中，我订阅了我的observable (我之前谈到的订阅非常简单，我只是在做了一些检查步骤后，将条形码添加到一个集合中。或者，
浏览 3提问于2019-01-14得票数 0
Angular Material的对话框水平和垂直地弹出在浏览器视图端口的中心，这很棒。但有时我希望弹出对话框位于指定父零部件的中心，而不是浏览器视图端口。我在文档中没有看到像parent这样的选项。我想知道有没有什么简单的方法可以做到。
浏览 15提问于2019-07-12得票数 1
在我更新我的Angular 4 PWA应用程序并部署后，用户无法获得新的更新，直到用户清除缓存并刷新浏览器。软件不会更新。即使我在crome Dev中按下更新按钮，它也不会更新，我必须清除缓存并刷新浏览器。我使用了这些包@angular/service-worker @angular/platform-ser
浏览 0提问于2017-09-12得票数 6
我想在更新子组件时更新父组件。我试图使用事件发射器来实现这一点，但我正在使用路由器出口来调用子组件。我不知道该怎么做。谢谢
浏览 4提问于2018-01-01得票数 3
回答已采纳
2回答
我试图在我的代码中调用一个方法，但它不起作用。没有发生错误，但单击事件也不起作用。在我的代码中，我动态地添加了一个按钮，它也被添加到了我的代码中。我正在使用<ng-table>，Approved和UnApproved按钮都在<ng-table>指令中。我的代码是： this.data.forEach(function (row) {
if (row.isApprov
浏览 0提问于2017-03-14得票数 5
我在Angular2应用程序中遇到了路由问题，使用这样的按钮可以很好地工作：但在函数中使用相同的路由失败了-页面似乎加载了一瞬间，然后应用程序完全刷新，并将我带回主/根页面，但控制台上没有错误。goToComponent() {
this.router.navigate(['
浏览 8提问于2017-03-12得票数 0
回答已采纳
1回答
在组件中如何双向绑定以下示例:当我在相应的方法中设置或取消设置dataitem.isSelected时，我希望按钮的文本自动切换@Component
浏览 0提问于2017-07-20得票数 1
从MKMapKit didSelect批注委托中将更新推送到封装SwiftUI视图的适当方式是什么？，它还会阻止MKMapView中的批注图钉被明显地选中(图钉图标在第一次点击时不会增长)。类似地，将绑定从CompoundView传递到MapView似乎是有问题的，因为点击时大头针图标不会增长的问题仍然存在。我假设是由于父视图在状态改变时被重建了。我尝试过将委托逻辑包装在DispatchQueue.main.asyn
浏览 34提问于2020-10-19得票数 0
回答已采纳
2回答
我有一个div标签，我想在这个div中附加角度材料表单域。问题是它没有呈现这些标签。我们可以使用任何方法做到这一点吗？
浏览 0提问于2019-09-27得票数 0
有人知道它是用来做什么的吗？我的app-routing.module就是这样；import { Routes, RouterModule } from'@angular/router';
import { LoginComponent } from '.import { Component, OnInit } from '@angular&#
浏览 23提问于2019-07-05得票数 0
回答已采纳
我正在尝试开发我的第一个Angular应用程序，然而，当我更改源文件时，应用程序经常不会更新。有没有某种缓存正在进行，或者有什么我应该知道的问题？
浏览 13提问于2016-08-07得票数 4
2回答
我想在我的angular应用程序中更新两个视图，它们都有自己的控制器。我有一个工厂：.factory('userFactory', function(DSCacheFactory){
var user = DSCacheFactory.get但是当用户登录时，会显示他们的用户名和姓名。我遇到的问题是，当我刷新页面时，
浏览 1提问于2014-10-18得票数 0
1回答
视图未按预期更新
、、
我的控制器中有以下设置，我希望它能够适当地更新我的视图，但在刷新页面之前不会这样做：var loadingGames = $q.defer();
}); angular.fo
浏览 4提问于2015-08-12得票数 0
回答已采纳
1回答
我正在尝试从使用angular material创建的表中删除一条记录- </button> </ng-container>如何获取数据源的更新
浏览 0提问于2021-10-27得票数 0
1回答
我在AngularJS中有一个组件，它将一个值保存到视图中的<img>的作用域。当用户更改图像时，控制器通过$rootScope.$emit发出更改，URL值更新，显示新上传的图像的视图也应该这样做： templateUrl: 'data-ng-src="{{$ctrl.avata
浏览 3提问于2019-10-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
