如何避免在Angular中更新视图后旧值闪现？
在Angular中避免旧值闪现的问题，可以采取以下几种方法：
- 使用双向数据绑定：Angular的双向数据绑定机制可以确保视图与模型的同步更新。通过在模板中使用双向数据绑定语法（例如(ngModel)），可以实时更新视图中的数据，避免旧值的闪现。
- 使用Change Detection策略：Angular的变更检测机制可以检测到模型数据的变化，并更新视图。可以通过设置组件的Change Detection策略来控制变更检测的触发时机。常用的策略包括Default、OnPush和Detached。根据具体情况选择合适的策略，以避免不必要的视图更新。
- 使用ngIf指令：通过使用ngIf指令，可以在视图中根据条件动态显示或隐藏元素。当模型数据发生变化时，ngIf指令会重新计算条件，并根据结果更新视图。通过合理使用ngIf指令，可以避免旧值的闪现。
- 使用管道（Pipes）：Angular的管道可以对数据进行转换和格式化，可以在模板中使用管道来处理数据，以确保视图中显示的数据始终是最新的。
- 使用ngZone服务：Angular的ngZone服务可以将代码运行在Angular的变更检测机制之外，可以手动触发变更检测，以确保视图的及时更新。
总结起来，为了避免在Angular中更新视图后旧值闪现，可以使用双向数据绑定、合适的Change Detection策略、ngIf指令、管道和ngZone服务等方法来保持视图与模型的同步更新。
相关·内容
2回答
数据流和数据绑定之间有什么关系？
、、、、
数据流和数据绑定。我经常读到其中一个术语，我发现它与另一个词互换使用。
例如
双向流(也称数据绑定)绑定两种状态:在大多数情况下，一种在控制器内(例如某些变量)，另一种在视图中(例如，文本框的内容)。绑定意味着，当一段更改时，另一段也会发生变化，并得到相同的值，因此您可以假装只涉及一段状态(实际上只有两段状态)。写事件在控制器和视图之间来回进行，因此是双向的。
问题如下：
differences?What和这两个术语都有不同的名称，或者重要的是是使用这两个术语的适当方式/上下文吗？
我已经标记了现代的js技术，比如react和角，因为这就是我的背景，但是没有它们的例子也很好。如果你觉得清单
浏览 1提问于2020-12-15得票数 0
2回答
优秀的开发人员，我需要一点帮助来澄清为什么角2比角1更有表现力？
在搜索完网站之后，我从那里得到了一个相关的解释
Angular 2 is using Hierarchical Dependency Injection system which is major performance booster.
Angular 2 implements unidirectional tree based change detection which again increases performance .
As per ng-conf meetup, angular 2 is 5 times f
浏览 5提问于2016-08-05得票数 7
回答已采纳
我有一个问题，当我更新我的observable订阅中的变量时，我的视图不会改变。我试图在等待后端的响应时显示一个加载微调器，然后显示该响应，但微调器不会隐藏。我的订阅如下所示：
this.isRequesting = "true";
this.questionService.onSubmit(form, this.questions).subscribe( (value) => {
this._ngZone.run( () => {
this.fileLocation = JSON.stringify(value);
浏览 51提问于2016-07-19得票数 55
回答已采纳
我使用的是Geocoder，当返回结果时，双向数据绑定不起作用。数据只是在视图中不刷新。如果我手动更改任何其他属性，数据将被刷新.所以，我搜索了(很多)，找到了一个使用ngZone的解决方案。以下是我所做的：
getLocation(address: string): void {
var mygc = new google.maps.Geocoder();
this._ngZone.runOutsideAngular(() => {
mygc.geocode({
'address': address
}, (
浏览 9提问于2017-02-02得票数 4
回答已采纳
4回答
我是一个试图理解angular双向数据绑定的新手。在文档中，它提到“对视图的任何更改都会立即反映在模型中，并且模型中的任何更改都会传播到视图中”。因此，如果有一个输入框( model )和一个表达式( view )，我可以看到“模型中的任何更改都传播到视图”是有效的，但我希望看到一个相反场景的示例，即“视图的任何更改都会立即反映在模型中”，以及我如何自己演示它。任何帮助都会得到高度评价。谢谢
浏览 4提问于2015-06-23得票数 3
我有以下文件：
topnav.component.ts
import { Component } from '@angular/core';
import { EnvironmentService } from '../services/ipc/environment.service';
const { ipcRenderer } = electron;
@Component({
selector: 'app-topnav',
templateUrl: './topnav.component.html',
styl
浏览 8提问于2017-03-12得票数 3
回答已采纳
3回答
我在试着理解Angulars单向绑定的工作原理。在下面的代码中，该按钮只更新视图一次，而在随后的单击中，该视图没有任何效果。有人能解释一下为什么会这样吗？在我看来，每次单击按钮时，数据库obj都被设置为一个新的引用对象。那么每次单击按钮时不应该更新视图吗？
模板：
<div *ngIf="obj;">
<input #testInput [value]="obj.testValue">
<button (click)="onClick(5)"></button>
</div>
浏览 0提问于2019-12-28得票数 0
回答已采纳
1回答
在角度2中流的变化检测？
、、、
在组件中读取流时，我无法赋值变量。
import { Component, OnInit } from '@angular/core';
var fs: any = require('fs');
@Component({
selector: 'stream-cmp',
templateUrl: 'app/view/stream.html',
styleUrls: ['./app/view/stream.css'],
})
export class StreamCmp {
private _an
浏览 0提问于2016-07-21得票数 0
我制作了一个非常简单的演示应用程序来解释我想要做的事情。
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
a=1
b=2
increase(){
this.a++
this.b++
}
}
模板：
<p>{{ a }}</p>
<p>
浏览 10提问于2022-06-20得票数 1
我有一个按钮，我想显示，只有当某物是脏的，需要保存。我的HTML中有以下内容
<mat-action-row>
<button mat-raised-button color="primary" *ngIf="IsDirty(segmentGroup)"
(click)="Save(segmentGroup)">Save</button>
</mat-action-row>
下面是TS中的IsDirty方法
IsDirty(segmentGroup: SegmentGrou
浏览 2提问于2022-02-10得票数 0
我在网上看到了这个。作者所做的是在clickCount上当观察者超过4时解除它的绑定。
var unbindWatcher = $scope.$watch(
"clickCount",
function(newClickCount) {
console.log("Watching click count.");
if (newClickCount >= 5) {
$scope.isShowingFeedback = true;
unbindWatcher();
}
}
);
当观察者已经不受约束时
浏览 0提问于2016-04-05得票数 1
回答已采纳
2回答
我有一个控制器，其中包含一个具有独立作用域的指令。每当用户更改指令下拉列表中的值时，我需要将更改通知控制器。为此，我为指令提供了回调函数，并在指令的下拉列表中对ng更改事件调用该函数。我不能(也不想)在父控制器中使用手表，因为这里我只对用户生成的更改感兴趣。
我的问题是，在调用回调时，控制器作用域上的值还没有通过双向绑定从指令中更新(我猜这是因为回调是在同一个摘要周期中调用的，其中检测到了下拉列表模型上的更改，但是来自父控制器的模型只会在随后的周期中更新)。
下面是一个演示此问题的柱塞示例(注意控制台输出)：
柱塞相关零件的摘录：
主计长：
...
vm.countryChanged
浏览 3提问于2017-04-10得票数 6
回答已采纳
我有一个公开的方法，我接触到了window。此方法与Component对话，并修改我在模板中看到的变量。但是，当我更改值时，*ngIf()不会被触发。
app.component
constructor(private _public: PublicService,) {
window.angular = {methods: this._public};
}
PublicService
export class PublicService {
constructor(
private _viewManager: ViewManagerComp
浏览 4提问于2016-10-11得票数 3
回答已采纳
检查后，表达式发生了更改。以前的价值：“25分钟前”。现值：“26分钟前”。
我试图在我的角4组件中显示基于moment的时间。
组件标记
<div class="float-right">
<small *ngIf="!isInProgress(batch)" class="text-muted"
[textContent]="getMomentEndTime(batch)"></small>
</div>
组件
export class BatchSt
浏览 1提问于2017-12-05得票数 0
回答已采纳
5回答
我有一个Angular (5.2.3)应用程序，我想在页面的右上角显示一个登录/注销按钮。在幕后，我尝试使用外部Open ID Connect提供程序以静默方式登录用户。当回调到达时，我希望显示用户名和注销按钮。但遗憾的是，视图永远不会更新以反映这一点。
下面是组件的视图：
<ul class="navbar-nav">
<li class="nav-item" *ngIf="!loggedIn">
<a href="#" class="nav-link" (click)=
浏览 0提问于2018-02-02得票数 4
1回答
我正在使用Angular 8 (angular.io)开发一个应用程序，注意到press/mousedown/touchstart事件在触发之前会有延迟，或者至少在视图中看到任何响应之前会有延迟。有没有办法降低或消除这种延迟？这在我的笔记本电脑和触摸屏面板上都会发生，所以我知道这不是特定于设备的。
浏览 22提问于2019-09-28得票数 0
1回答
我在一张角质材料桌上表现很差。当我检查控制台时，我可以看到它多次绑定每一行，尽管我看不出是什么触发了它。我已经尽可能地简化了我的代码，并且我仍然看到了这个问题。
有257行，但是记录到控制台的计数为1542，这意味着每一行似乎被绑定了6次。格式化函数decimalTimeToHours应为每一行调用一次。你知道为什么会有这么多次绑定吗？
import {HttpClient} from '@angular/common/http';
import {EndPoints} from '../utils/endPoints';
import {MarketMaker
浏览 2提问于2021-03-31得票数 0
回答已采纳
我有一个像这样的角度应用程序
Javascript：
(function(angular, module){
module.controller("TestController", function($scope){
$scope.magicValue = 1;
});
module.directive("valueDisplay", function () {
return {
restrict: "A",
template: '
浏览 1提问于2013-10-28得票数 0
回答已采纳
我有两个组件，其中我使用ChangeDetectionStrategy.OnPush。父组件：
@Component({
changeStaregy: ChangeDetectionStrategy.OnPush,
template:`
<button (click)="onClick()">clear</button>
<div>
<test [model]="model"></test>
</d
浏览 0提问于2017-07-24得票数 5
我正在尝试用angular 2创建一个应用程序，并且在我的应用程序中有一个身份验证服务，我的html模板是这样的：
<header>
<div *ngIf="isLogin()"><a href="">profile</a></div>
<div *ngIf="!isLogin()"><a href="">register</a></div>
<div *ngIf="!isLogin(
浏览 1提问于2016-05-15得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
