时间戳

首页 > 解决方案 > 在编辑角度表单时添加加载 div 直到数据加载

angular - 在编辑角度表单时添加加载 div 直到数据加载

问题描述

这是旋转卡的代码：

<ng-template #spinnercard>
<mat-card>
  <mat-card-title>Loading</mat-card-title>
  <mat-card-content>
    <mat-spinner></mat-spinner>
  </mat-card-content>
</mat-card>
</ng-template>

这是我的简单表单代码：

<form (submit)="onSubmit()" [formGroup]="markupForm">    
        <mat-form-field>
            <input formControlName="markup_flatrate" matInput placeholder="Flat Rate Markup"  />
        </mat-form-field>

        <mat-form-field>
            <input formControlName="markup_percent" matInput placeholder="Markup Percent"   />
        </mat-form-field>

        <button [disabled]="!markupForm.valid" color="primary" mat-raised-button [class.spinner]="loading" [disabled]="loading" >
          <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
        Save Changes</button>
    </form>

这是获取表单值的代码：

     this.markupsSvc.getMarkupRuleDetails(this.client, this.rule_id)
                    .pipe(first())
                    .subscribe(x => {this.markupForm.patchValue(x); 
                  });

问题是加载表单值需要花费大量时间，我想添加 spinnercard/loading div 直到未加载时间表单值。请帮忙。

标签： angular

解决方案

推荐阅读