如何停止在角11中加载微调器

Question

我在应用程序中添加了加载微调器。我想在显示PDF时停止它。我已经添加了停止加载的代码，但这是不可行的。如何解决这个问题。

pdf.component.html

<section>
<div style='position: relative; height: 100%;'>
<pdf-viewer style="width: 20px" [src]="pdfsrc+data[0].pdf_name" [render-text]="true" style="display: block;" [rotation]="0"
[original-size]="false" [show-all]="true" [fit-to-page]="true" [zoom]="0" [zoom-scale]="'page-width'" [stick-to-page]="false"
[render-text]="true" [external-link-target]="'blank'" [autoresize]="true" [show-borders]="false"></pdf-viewer>
</div>
</section>
<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="default" type="ball-spin-clockwise">
<p style="color: rgb(33, 221, 118)">Be Patince PDF is loaded. </p>
</ngx-spinner>

pdf.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiService } from '../api.service';
import { NgxSpinnerService } from "ngx-spinner";
@Component({
selector: 'app-pdf',
templateUrl: './pdf.component.html',
styleUrls: ['./pdf.component.css']
})
export class PdfComponent implements OnInit {
constructor(private aroute: Router, private formBuilder: FormBuilder, private SpinnerService: NgxSpinnerService, private api: ApiService, private activeRoute: ActivatedRoute, private route: Router) {
}
data: any;
//totalPages:any;
submitted = false;
ngOnInit(): void {
this.SpinnerService.show();
window.scrollTo(0, 0);
this.api.tbl_report_pdf_data_one(this.activeRoute.snapshot.params.pdfid).subscribe((res) => {
this.data = res;
this.SpinnerService.hide();
})
page: number = 1;
isLoaded: boolean = false;
pdfsrc: any = "assets/uploads/";

Answer 1

这应该非常简单，只需在HTML:中使用isLoaded

<ngx-spinner *ngIf="!isLoaded" bdColor="rgba(51, 51, 51, 0.8)" size="default" type="ball-spin-clockwise">
<p style="color: rgb(33, 221, 118)">Be Patince PDF is loaded. </p>
</ngx-spinner>

和

this.api.tbl_report_pdf_data_one(this.activeRoute.snapshot.params.pdfid).subscribe((res) => {
this.data = res;
this.isLoaded = true;
})