Question

我想获得一个单击按钮以保存数据时显示微调框的结果。该按钮应该隐藏（在将数据保存到后端的过程中），然后在保存数据时再次显示。

下面是HTML代码

 <div class="card-footer">
        <div class="row">
          <div class="col text-danger col-form-label font-weight-bold">(*) Required fields</div>
          <div class="col text-right" *ngIf="!hidebutton">
            <app-spinner *ngIf="!showspinner"></app-spinner>
            <button class="btn btn-primary">To accept</button>
            <button class="btn btn-outline-secondary ml-4" (click)="getBack()">Cancel</button>
          </div>
        </div>
      </div>

Component.ts代码

 export class DocumentFormComponent implements OnInit {
   hidebutton: boolean = false;
  onSubmit(form: NgForm) {
  this.hidebutton = true;
const swalWithBootstrapButtons = Swal.mixin({
  customClass: {
    confirmButton: 'btn btn-primary',
    cancelButton: 'btn btn-outline-secondary ml-4'
  },
  buttonsStyling: false
});

// validate the form
this.validateForm(form);

// this check if it's a new document to create
if (this.validForm) {
  const newDocument =  this.myDocument;
  const  formData = new FormData();
  formData.append('document', JSON.stringify(newDocument));
  formData.append('attachedFile', this.selectedFile);

  swalWithBootstrapButtons.fire({
    title: 'Are you sure?',
    text: 'You will not be able to revert this!',
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, save it!',
    cancelButtonText: 'No, cancel!'
  }).then((result) => {
    // Save Doc
    if (result.value && !this.editing) {
      this.showspinner = true;
      this.documentService.saveDocument(this.customerId, formData)
        .subscribe(respondData => {
            swalWithBootstrapButtons.fire(
              'Saved!',
              'Your Document has been saved.',
              'success');
            // after success coming back document list
          this.hidebutton = false;
            this.showspinner = false;
            this.router.navigate(['/customers/', this.customerId, 'documents']);
        }, error => {
          swalWithBootstrapButtons.fire(
            'Didn`t save!',
            'Your Document could`t be saved.',
            'error');
      });}}

Answer 1

<div class="card-footer">
        <div class="row">
          <div class="col text-danger col-form-label font-weight-bold">(*) Required fields</div>
          <div class="col text-right">
            <app-spinner *ngIf="hidebutton"></app-spinner>
            <button *ngIf="!hidebutton" class="btn btn-primary">To accept</button>
            <button *ngIf="!hidebutton" class="btn btn-outline-secondary ml-4" (click)="getBack()">Cancel</button>
          </div>
        </div>
      </div>

尝试

Answer 2

使用“保存”按钮切换微调器。

this.showspinner = this.hidebutton ? this.hidebutton : !this.hidebutton;

角度：单击按钮时显示微调器

2 个答案: