Question

在我的Angular组件isLoading$中，observable取决于counter $并定义其是否为数据加载：

export class MediaQueriesWidgetComponent implements OnChanges, OnDestroy {

  // ... some code 

  isLoading$: Observable<boolean>;
  counter$: Observable<number>;

  constructor(private _ApiService: ApiService) {}
  ngOnChanges(changes: SimpleChanges) { 
    this.counter$ = merge(
      this.url$.pipe(mapTo(1)),
      this.cssInternal$.pipe(mapTo(1)),
      this.css$.pipe(mapTo(-1)),
    ).pipe(
      scan((acc, curr) => acc + curr, 0),
    );

    this.isLoading$ = this.counter$.pipe(map(counter => counter !== 0))

    //  ... some code
  }
}

与isLoading$绑定有关的问题在实际检索数据时未在模板中获得值。自然，它会导致移动到模板的else部分：

  <span> {{ isLoading$ | async }} </span>  // empty span
 <div class="list-container" *ngIf="!(isLoading$ | async); else loading"></div>
 <ng-template #loading></ng-template>

Answer 1

删除ngIf中的！（not）运算符。

<div class="list-container" *ngIf="(isLoading$ | async); else loading">
  Loading from If
</div>
<ng-template #loading> Loading from else</ng-template>

Stackblitz：https://stackblitz.com/edit/angular-grtalt

Observable在模板中未获取值

1 个答案: