Question

Angular 4 Chaining Observable在模型更改时不会导致DOM更新。该模型是一组称为用户的对象。当调用favoriteThisUser时，这可以正常工作并调用refresh方法。此方法不会更新DOM，但会从geosearch返回正确的结果。有人可以向我解释为什么会这样吗？

refresh() {
    this.usersService.geosearch(this.usersService.user).subscribe(
      data => {
        console.log('!!!USESR!!!', data);
        this.users = data;
      },
      err => {
        console.log(err);
      }
    );
  }

  favoriteThisUser(id: string) {
    this.usersService.favorite(id).subscribe(
      data => {
        console.log('SUCCESS!!!', data);
        this.refresh();
      },
      err => {
        console.log(err);
      }
    );
}

dom基本上是

<div *ngFor="let user of users">
...
    <div *ngIf="user.fav">
               <i class="fa fa-star favorite-inline"></i>
    </div>
...
</div>

Answer 1

我希望我能正确理解你。

我认为favorite方法返回Observable或Subject。订阅时，发生的事件很少：

onNext
的onError
的onComplete

基本上它看起来像这样：

this.someService.someMethod()
  .subscribe(
    // onNext
    result => console.log(result),

    // onError
    error => console.log(error),

    // onComplete
    () => this.foo()
  );

对于你编码我的猜测它应该是这样的：

favoriteThisUser(id: string) {
  this.usersService.favorite(id).subscribe(
    data => {
      console.log('SUCCESS!!!', data);
    },
    err => {
      console.log(err);
    },
    () => {
      this.refresh();
    }
  );
}

完成数据订阅后，已完成的方法正在运行。如果出现错误，则完成（或() =>）将无法运行。

希望有所帮助

Answer 2

由于用户数据是由Web服务调用驱动的，我建议通过Subject将其绑定到模板，并使用Angular提供的async管道。

每次主题发出更改/新值时，都应该更新模板。使用take(1)可确保Observable方法返回的geosearch完成，以避免内存泄漏。

<强>组件：

class myComponent {
   usersSubject: Subject<UserInterface>;

   constructor(...) {
      ...
      this.usersSubject = new Subject();
      ...
   }

   refresh() {
     this.usersService.geosearch(this.usersService.user)
       .take(1)
       .subscribe(
           userData => {
              this.usersSubject.next(userData);
           }
       );
  }

}

<强>模板：

<div *ngIf="usersSubject | async as users>
    <div *ngFor="let user of users">
    ...
        <div *ngIf="user.fav">
                   <i class="fa fa-star favorite-inline"></i>
        </div>
    ...
    </div> 
</div>

当模型更改时，Angular 4 Chaining Observables不会在GUI中导致更新

2 个答案: