angular - Angular 6 模板没有看到变化

Question

Angular 6 组件通过 Input()allItems参数接收一个大列表：

ngOnInit() {
    this.isLoading = true;
}

ngOnChanges(changes) {
    if (changes.allItems && changes.allItems.currentValue.length) {
        this.isLoading = false;
    }
}

我想在加载此列表时显示微调器。

<mat-spinner *ngIf="isLoading"></mat-spinner>

但是在某些情况下，微调器会永远旋转，停止它的唯一方法是使用 setTimeout。有没有更优雅的方法呢？请指教。

ngOnChanges(changes) {
    if (changes.allItems && changes.allItems.currentValue.length) {
        setTimeout(() => this.isLoading = false, 0);
    }
}

我尝试了不同的方法：调用 ChangeDetectorRef 的 detectChanges、应用 onPush 策略等。

不幸的是，到目前为止唯一有效的是 setTimeout :(

标签： angularangular-material

Answer 1

通过以下方法，您可以避免使用 ngOnChanges 挂钩：

  @Input() set items(items: any[]) {
    this.allItems = items;
    if(this.allItems) {
     this.isLoading = false;
    }
  }

如果你最初声明 isLoading 你甚至可以摆脱 ngOnInit 钩子：

isLoading = false;