Angular:单击按钮时显示微调器

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>

组件.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;