![值不会在视图中更新]( "值不会在视图中更新")
本文介绍了更改后，Angular 8 值不会在视图中更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 Angular 中有一个小组件，其方法(目前)设置超时并更改变量的值.
import { Component, ChangeDetectionStrategy } from '@angular/core';@成分({选择器:'我的组件'，templateUrl: './my-view.html',styleUrls: ['./my-view.scss'],changeDetection: ChangeDetectionStrategy.Default})导出类 MyComponent {状态:布尔值 = 假；更改状态():无效{setTimeout(() => {this.status = true;}, 1500);}}
和 HTML
<form #myForm="ngForm"><input name="code" type="text" class="form-control" [(ngModel)]="code" #codeInput="ngModel" required placeholder="输入你的代码"/></表单>
<div class="row"><div class="col-md-5" (点击)="changeStatus()"><mat-icon aria-label="clear-all" *ngIf="!status"></mat-icon><a>更改状态</a>
<div class="col-md-7"><button type="button" class="btn-flat app-btn-flat">取消</button><button type="button" class="btn app-btn" [disabled]="myForm.invalid || myForm.pristine">保存</button>
如果我在组件中记录状态"的值.我得到了true"的新值，但它不会在视图上改变，除非我将光标放在输入上，然后单击它之外的任何地方.
为什么会这样?我该如何解决?
解决方案
为什么会这样?
您在祖先组件之一中将 changeDetection 设置为 OnPush.该属性不能被覆盖.参考:https://angular.io/api/core/ChangeDetectionStrategy
我该如何解决?
在祖先组件中取消设置 changeDetection，或者像 Adam 的回答那样手动检测变化.
constructor(private _cdr: ChangeDetectorRef) {}更改状态():无效{setTimeout(() => {this.status = true;this._cdr.detectChanges()}, 1500);}
I have a small component in Angular with a method that (for now) sets a timeout and changes the value of a variable.
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my-view.html',
styleUrls: ['./my-view.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class MyComponent {
status: boolean = false;
changeStatus(): void {
setTimeout(() => {
this.status = true;
}, 1500);
}
}
And the HTML
<div>
<form #myForm="ngForm">
<input name="code" type="text" class="form-control" [(ngModel)]="code" #codeInput="ngModel" required placeholder="Enter your code" />
</form>
</div>
<div class="row">
<div class="col-md-5" (click)="changeStatus()">
<mat-icon aria-label="clear-all" *ngIf="!status"></mat-icon>
<a>Change status</a>
</div>
<div class="col-md-7">
<button type="button" class="btn-flat app-btn-flat">Cancel</button>
<button type="button" class="btn app-btn" [disabled]="myForm.invalid || myForm.pristine">Save</button>
</div>
</div>
If I log the value of 'status' in the component. I get the new value of 'true' but it won't change on the view unless I focus the cursor on the input and then click anywhere outside it.
Why is that happening? how can I solve it?
解决方案
Why is that happening?
You set changeDetection to OnPush in one of the ancestor component. That property cannot be overridden. Ref: https://angular.io/api/core/ChangeDetectionStrategy
how can I solve it?
Unset changeDetection in the ancestor component, or manually detect changes like Adam's answer.
constructor(private _cdr: ChangeDetectorRef) {}
changeStatus(): void {
setTimeout(() => {
this.status = true;
this._cdr.detectChanges()
}, 1500);
}
这篇关于更改后，Angular 8 值不会在视图中更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！