Angular 6 模板没有看到变化答案

【问题标题】：Angular 6 template does not see changesAngular 6 模板没有看到变化
【发布时间】：2021-08-16 09:30:06
【问题描述】：

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 :(

【问题讨论】：

你必须提供一个完整的例子。我唯一能猜到的是，当您将项目添加到allItems 时，不会触发ngOnChanges。但是在这种情况下超时不应该有帮助......

标签： angular angular-material

【解决方案1】：

您的方法应该在没有setTimeout 的情况下工作。我可能会这样做：

isLoading: boolean = true;

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

【讨论】：

当然。非常感谢你。我忘了 ngOnChanges 在 ngOnInit 之前触发
很高兴我能帮上忙，这肯定在某个时候发生在我们所有人身上！

【解决方案2】：

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

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

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

isLoading = false;

【讨论】：