*ngIf 显示然后不显示

Question

我问了之后写了这个：Observable need a click to load on html page
解决方案很好，但现在的问题是我有每个相同的 id 显示，因为我以前做过：

getFeederArray(): Observable<Array<string>> {
    let toReturn: Array<string> = [];
    var subject = new Subject<Array<string>>();
    this.getUser().subscribe(user => {
      this.orders = this.db.collection("orders", ref => {
        return ref
        .where("clientId", "==", user.id)
      }).valueChanges({ idField: 'id' }) as Observable<Order[]>;
      this.orders.subscribe(orders => {
        orders.forEach(order => {
          if(toReturn.indexOf(order.feederId) == -1) {  <---- to not have twice the same order
            toReturn.push(order.feederId);
          }
        })
      })
      subject.next(toReturn);
    })
    return subject.asObservable();
  }

现在我有了：

getFeederArray(): Observable<string[]> {
    return this.getUser().pipe(
      switchMap((user) => {
        this.orders = this.db
          .collection("orders", (ref) => ref.where("clientId", "==", user.id))
          .valueChanges({ idField: "id" }) as Observable<Order[]>;

        return this.orders;
      }),
      map((orders) => orders.map((order) => order.feederId))
    );
  }

不再需要点击，所以显示正常，但我们可以有两次相同的订单。
所以我在我的 html 中尝试了：

<section class="mobile" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="20px" *ngFor="let id of _feedersId | async">
          <div *ngIf="this.isAlreadyDisplayed(id)">
            {{ cl(id) }}
            <app-feeder-card
            [feederId] = "id"
            [clientId] = "this.uid"
            ></app-feeder-card>
          </div>
</section>

在 .ts 中使用这些函数：

// push in array
  pushAlreadyDisplayed(str: string) {
    this.alreadyDisplayed.push(str);
  }

  // boolean already displayed
  isAlreadyDisplayed(str: string): boolean {
    const bool = this.alreadyDisplayed.includes(str);
    if(bool) {
      return !bool;
    } else {
      this.pushAlreadyDisplayed(str);
      return !bool;
    }
  }

  cl(str: string) {
    console.log(str);
  }

但是出现了一个问题：我的页面很好console.log的ids（这很好，没有两次相同），但是这部分在HTML中：

{{ cl(id) }}
<app-feeder-card
   [feederId] = "id"
   [clientId] = "this.uid"
></app-feeder-card>

仅显示不到 1 秒然后消失...
我不明白为什么，所以我不知道如何解决我的问题......
感谢您的宝贵时间

Answer 1

好吧，当您使用 pushAlreadyDisplayed() 时，您对 alreadyDisplayed 进行了更改。 这个东西需要重新渲染组件，并且在第二次迭代中，ID 是 标记为已区域渲染。

更好的解决方案是从重复中减少数组