Angular 2 - * ngif在从oberservable subscribe进行变量更新时不刷新

时间:2016-11-23 08:54:25

标签: javascript angular rxjs

在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;
          }
    }

我必须触发某种通知吗?

2 个答案:

答案 0 :(得分:22)

如果这可以解决您的问题,可以试试:

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))

答案 1 :(得分:1)

发现错误。 this更改。this在观察var component = this; this.service.createProject(this.model).subscribe(i=>{ component.error = true; 中指向osbervable而不再是组件。

所以我必须得到一个变量的组件引用,并将此引用的错误设置为true。

工作代码如下所示:

table