时间戳

首页 > 解决方案 > ngIf 不工作 Angular 7 第一次之后

angular - ngIf 不工作 Angular 7 第一次之后

问题描述

这是HTML代码

<form class="k-form-inline" [formGroup]="catalogForm" (ngSubmit)="onSubmit()" (keyup.enter)="onSubmit()">
     <button class="k-button k-primary" style="width:100px" [disabled]="loading" style="margin-right:15px" >
              <span class="k-icon k-i-zoom" style="padding-right: 20px"> </span>Search
     </button>
     <span *ngIf="loading" class="k-icon k-i-loading" style="font-size: 16px; padding-left:10px"></span>
</form>

在组件上

public loading : boolean = false;

onSubmit() {
    this.loading = true;
     this.Service.subscribe(res => {this.loading = false;})
}

编辑：这是服务代码。

export class ProductService  extends BehaviorSubject<GridDataResult>{

constructor(private http: HttpClient) 
  { super(null); }

protected fetch(state: any, searchForm: ProductCatalogSearch,CustomerGroupCode : string): Observable<GridDataResult> {
    searchForm.CustomerGroupCode = CustomerGroupCode;
    return this.http
      .post<any>(this.rootURL + '/product/catalogsearch', searchForm)
      .pipe(
        map(response => (<GridDataResult>{
          data: response,
          total: (response as any[]).length
        }))
      );
  }

  public query(state: any, searchForm: ProductCatalogSearch, CustomerGroupCode: string): void {
    this.fetch(state, searchForm,CustomerGroupCode)
      .subscribe(x => super.next(x));
  }
}

当我在加载/刷新后第一次单击按钮时，这非常有效。之后，它在随后的点击中停止工作。提交在任何点击中都可以正常工作，由于某种原因“加载”变量没有改变。

我错过了什么吗？

标签： angulartypescript

解决方案

尝试实现生命周期钩子 AfterViewChecked 和 detectChanges。这应该有助于从角度检测加载变量的变化。

import { AfterViewChecked, ChangeDetectorRef, Component } from '@angular/core';
...
constructor(private cdref: ChangeDetectorRef)
...
ngAfterViewChecked(): void { this.cdref.detectChanges(); }

推荐阅读