Question

这是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));
  }
}

当我在加载/刷新后第一次单击按钮时，这非常理想。之后，它将停止在后续点击中工作。每次点击均可正常提交，这是出于某些原因，“加载”变量未更改。

我错过了什么吗？

Answer 1

如果您的呼叫返回错误，则您未将this.loading设置为false：

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

Answer 2

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

PID;Name;IsDead
144;Mike;True
266;Carl;False
984;Anna;False

ng如果不工作Angular 7第一次之后

2 个答案: