gpt4 book ai didi

angular - *ngIf 行为 : how to conditionally show data in angular 2?

转载 作者:太空狗 更新时间:2023-10-29 18:07:28 26 4
gpt4 key购买 nike

这是显示数据组件:

@Component({
selector: 'show-data',
template: `yes! Now showing the show-data directive template !`
})
export class ShowData {}

及其父级:

@Component({
selector: 'my-app',
template: `
The 'shouldShow' boolean value is: {{shouldShow}}
<show-data *ngIf="shouldShow"></show-data>
<div *ngIf="!shouldShow">NOT showing the show-data directive template</div>
`,
directives: [ShowData]
})
export class App {
shouldShow:boolean = false;
constructor(){
console.log("shouldShow value before timeout",this.shouldShow);
window.setTimeout(function(){
this.shouldShow = true;
console.log("shouldShow value after timeout",this.shouldShow);
}, 1000);
}
}

最初,shouldShow 变量设置为 false,show-data 指令模板不显示。很好。

shouldShow 然后在一秒钟后由父组件构造函数设置为“true”。

为什么shouldShow的值在父组件 View 中没有更新?

这是一个plunkr

最佳答案

您的问题不在 *ngIf 本身。它在 setTimeout(function(){...}) 上,因为匿名函数中的 this 将引用函数本身而不是 AppComponent实例。

因此,相反,能够访问 AppComponent 实例。使用 lambda expression (也称为箭头函数)。

这是您的 plunker已编辑

window.setTimeout(()=>{
this.shoulShow = true;
console.log("shoulShow value after timeout",this.shoulShow);
}, 1000);

或者,您可以将 this 分配给一个新变量,以便能够从匿名函数内部访问它。

let that = this
window.setTimeout(function(){
that.shoulShow = true; // here use the new var 'that' instead of 'this'
console.log("shoulShow value after timeout",that.shoulShow);
}, 1000);

关于angular - *ngIf 行为 : how to conditionally show data in angular 2?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36448527/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com