时间戳

首页 > 解决方案 > 如何过滤在 ngOnInit 期间检索到的值并将它们显示在屏幕上？

angular - 如何过滤在 ngOnInit 期间检索到的值并将它们显示在屏幕上？

问题描述

我想在屏幕上显示那些 fastFoodShopList、 bakeryShopList、generalStoreList 变量，但不显示在屏幕上。

我已经确认正在使用 console.log 检索该值，但似乎在此之前正在显示屏幕。

如何在屏幕上显示这些变量？

  ngOnInit() {
    this.loaderService
      .loadShopList(userInfo)
      .pipe(takeUntil(this.onDestroy$))
      .subscribe((shopTypeList) => {
        this.fastFoodShopList = shopTypeList.filter((shop) => shop.type === 'fastFood')[0].shopList;
        this.bakeryShopList = shopTypeList.filter((shop) => shop.type === 'bakery')[0].shopList;
        this.generalStoreList = shopTypeList.filter((comment) => shop.type === 'generalStore')[0].shopList;
      });
  }

HTML 是这样的。

 <div *ngFor="let fastFoodShop of this.fastFoodShopList; index as i">
    <div class="row">
        <div class="col-12">
            <p>{{ fastFoodShop.shopName }}</p>
            <p>{{ fastFoodShop.memo }}</p>
        </div>
    </div>
</div>

标签： angularrxjsangular-material

解决方案

我自己解决了。

我需要 markForCheck();

  constructor(private cd: ChangeDetectorRef)

  ngOnInit() {
    this.loaderService
      .loadShopList(userInfo)
      .pipe(takeUntil(this.onDestroy$))
      .subscribe((shopTypeList) => {
        this.fastFoodShopList = shopTypeList.filter((shop) => shop.type === 'fastFood')[0].shopList;
        this.bakeryShopList = shopTypeList.filter((shop) => shop.type === 'bakery')[0].shopList;
        this.generalStoreList = shopTypeList.filter((comment) => shop.type === 'generalStore')[0].shopList;
        this.cd.markForCheck();
      });
  }

推荐阅读