typescript ngIf 没有检测到 var 变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42755184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ngIf not detecting var change
提问by Zze
I am using the greensock animation libraryto animate some components (as you would expect). I am experiencing an issue when I am updating a variable in the onCompletefunction which is bound to a *ngIf. For some reason, angular is not detecting the update to the variable in the callback.
我正在使用greensock 动画库来为某些组件设置动画（如您所料）。我在更新onComplete函数中绑定到*ngIf. 出于某种原因，angular 没有检测到回调中变量的更新。
Intended functionality:预期功能：
1. click grey image.
2. pink image fades out
3. one of the grey images dissapears.
Current functionality:
当前功能：
1. click grey image.
2. pink image fades out
3. (nothing happens)
4. click grey image - again.
5. one of the grey images dissapears.
I have a plunkrfor the following...
我有以下内容的plunkr...
declare var TweenMax; // defined in index.html
@Component({
selector: 'my-app',
template: `
<img *ngIf="leftVisible" src="http://placehold.it/350x150" (click)="animate(-1)"/>
<img *ngIf="rightVisible" src="http://placehold.it/350x150" (click)="animate(1)"/>
<img #otherImage src="http://placehold.it/350x150/ff00ff/000000"/>
`,
})
export class App {
@ViewChild('otherImage') otherImageElement;
private leftVisible: boolean;
private rightVisible: boolean;
constructor() {
this.leftVisible = this.rightVisible = true;
}
private animate(_direction: number){
var tween = TweenMax.to(this.otherImageElement.nativeElement, 1, {
opacity: 0,
onComplete: () => {
console.log("anim complete");
this.rightVisible = false;
}
}
};
}
You can see in the console that the callback fires successfully and updates the variable, however the element which is bound to the *ngIfdoes not change until you click one of the grey images a second time.
您可以在控制台中看到回调成功触发并更新了变量，但是绑定到 的元素*ngIf不会更改，直到您第二次单击其中一个灰色图像。
How do I get this to update as intended in the onCompletecallback?
我如何让它在onComplete回调中按预期更新？
回答by Pengyy
please refer to this Angular 2 documentation: Lifecycle Hooks
请参阅此 Angular 2 文档：Lifecycle Hooks
According to the documentation,
根据文档，
Angular's unidirectional data flow rule forbids updates to the view after it has been composed. Both of these hooks fire after the component's view has been composed.
Angular 的单向数据流规则禁止在视图组合后更新视图。这两个钩子都在组件的视图组成后触发。
Option1:use ngZone.runto notify angular to render the view again.
选项 1：用于ngZone.run通知 angular 再次渲染视图。
// import ngZone from @angular/core first.
this.ngZone.run(() => {
console.log("anim complete");
this.rightVisible = false;
});
Option2:use ChangeDetectorto let angular to render the view again.
选项 2：用于ChangeDetector让 angular 再次渲染视图。
import {ChangeDetector} from '@angular/core';
this.rightVisible = false;
this.cd.detectChanges();
Refer this plunkerthat contains the upper code block.
请参阅包含上层代码块的这个plunker。
