Angular 2 - 从可观察订阅进行变量更新时 *ngif 不刷新答案

【问题标题】：Angular 2 - *ngif not refreshing when variable update from oberservable subscribeAngular 2 - 从可观察订阅进行变量更新时 *ngif 不刷新
【发布时间】：2016-11-23 08:54:25
【问题描述】：

在 html 中，我只有在出现错误状态时才会显示警告，例如 thius

<div class="alert alert-danger" *ngIf="error">
    <strong>Not saved!</strong> There was an error when saving the project. Please try again later.
</div>

这很好用。但是当我从一个可观察的值中设置值时，ngIf 没有得到更新的值。

这里是为了测试目的总是将错误设置为 true 的简化代码

export class createProjectComponent {
    constructor(private service:ProjectsService){

    }

    model = new myModel();
    error = false;
    submitForm(){    
        this.service.createProject(this.model).subscribe(i=>{
            this.error=true;
          }
    }

我必须触发某种通知吗？

【问题讨论】：

this.service.createProject(this.model) 在做什么？你在那里使用一些非 Angular2 库吗？
目前它什么都不做，只返回一个 observable (没有错误发生)。而且我还调试了 error 属性设置为 true 。我认为它与 rxjs 正在创建的某种后台任务有关
你能在 Plunker 中重现吗？
您的代码看起来不错。我也像你一样使用了 *ngIf，它应该可以工作。你错误地使用了subscribe()。试试.subscribe( data => {}, error => {this.error =true});
@Kuba 使用 .subscribe 并没有错。他只是不处理错误；）

标签： javascript angular rxjs

【解决方案1】：

如果这能解决您的问题，您可以尝试：

constructor(private cdRef:ChangeDetectorRef) {}

submitForm(){    
    this.service.createProject(this.model).subscribe(i=>{
        this.error=true;
        this.cdRef.detectChanges();
    }
}

如果是这样，this.service.createProject(this.model) 中有一些代码会导致执行离开 Angulars 区域。

更新

如果您在任何地方都使用()=> 而不是function ()，并且如果您不只通过名称传递函数，例如someFunc(mycallback)，而是使用someFunc(() => mycallback()) 或someFunc(mycallback.bind(this))，则不需要这个

【讨论】：

没有任何改变
@BoasEnkler pro-tip：转到 github 上的 angular 页面：github.com/angular/angular/issues/new 并创建一个新问题。他们为您提供了一个带有预设置 plunkr 的链接，以启动一些 ng2 演示。 Plunkr：plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5
或者只使用 Plunker 中的[ New | V ] 按钮。还有一个现成的 Angular2 TS 模板。
为什么我需要这个。我在任何地方都不需要它。我的意思是，它有效。但我为什么需要它？
@Günter Zöchbauer。非常感谢。

【解决方案2】：

发现错误。 this 更改。在观察中this 指向可观察对象，不再指向组件。

所以我必须获取组件对变量的引用，并将此引用的错误设置为 true。

工作代码如下所示：

var component = this;

this.service.createProject(this.model).subscribe(i=>{
                component.error = true;

【讨论】：

不，它没有指向订阅，因为您使用了胖箭头......问题来自其他东西。它工作正常，但它可能会更好；）如果您对更多调试帖子感兴趣，更多上下文，否则没关系
如果您在任何地方都使用()=> 而不是function ()，并且如果您不通过名称（如someFunc(mycallback)）而不是someFunc(() => mycallback()) 或@987654328 来传递函数，则不需要这个@
你的权利。我只是把它写成 chsarp 的一种行为。没有意识到这一点。非常感谢！