Angular

Question

我有一个非常奇怪的问题，我不知道哪里出了问题。我有一个延迟加载的页面，尽管设置了数据，但模板没有更新。我没有使用 OnPush 或任何东西，因为它是一个页面而不是一个哑组件。我正在做一个 http 请求，设置数据，然后尝试循环此数据，但数据只显示在模板中，就像每 10 次尝试一次或类似的东西。以及在我单击刷新页面时页面开始刷新之前显示。

@Component({
  selector: 'bookings',
  templateUrl: './bookings.component.html',
  styleUrls: ['./bookings.component.scss']
})

export class BookingsComponent implements OnInit {

  public ongoing: any[];
  public confirmed: any[];

  constructor(private appApi: AppApi, private route: ActivatedRoute) {}

  ngOnInit() {

    this.route.params.subscribe(
      params => {

        const ongoing$: Observable<any[]> = this.appApi.get(`/some-endpoint`).map(res => res.data);
        const confirmed$: Observable<any[]> = this.appApi.get(`/some-endpoints`, {isConfirmed: true}).map(res => res.data);

        Observable.forkJoin(ongoing$, confirmed$).subscribe((data) => {

          this.ongoing = data[0];
          this.confirmed = data[1];
        });
      }
    );
  }
}

然后我在模板中这样做：

<ul>
  <li *ngFor="let booking of ongoing">
     <h1>{{booking?.title}}</h1>
  </li>
</ul>

但它没有给我 li 个元素。数据设置正确，因为当我记录它时它会显示在控制台中，但在实际更新模板时确实有些奇怪......任何想法可能导致此问题或我如何继续调试？我运行没主意了。

我试过使用：

this.cd.markForCheck()
setTimeout(() => /* setting data here */)
*ngFor="let booking of ongoing$ | async"（当然还要将数据更改为可观察数据）
每个 http 请求都有一个 subscribe 而不是 fork 连接两个 observable。
仅在订阅内设置任何静态值，这些也不会显示在模板中。如果我将它移到订阅之外，那么它就可以工作。

但是NOTHING似乎在工作。

我还能做什么？

Answer 1

这是因为在您的模板中有{{ongoing?.title}}，但实际上应该是{{booking.title}}。

Answer 2

我发现了它是什么，我有一个 Hotjar 脚本可以跟踪页面上的用户交互。由于某种原因，它完全破坏了 Angular 的变化检测。所以简单地删除它就解决了这个问题。

我希望这对以后尝试将 Hotjar 与 Angular 结合使用的其他人有所帮助。

Angular - 当设置来自 Observables 的数据时，视图在功能模块中没有 100% 的时间更新

Angular - View isn't updating in feature module 100% of the times when setting data from Observables

typescript

angular-http