Question

我有一个应用程序，其中网页需要显示进度条，同时网站上的fetech数据来自多个API并构建pdf文档。在这里，我使用jsPDF来构建pdf。我在模板中使用了以下实现。

<div class="col-md-2 col-sm-2">
<mat-progress-bar mode="indeterminate" [value]="progressValue" *ngIf="isPrintinginProgress"></mat-progress-bar>
<Button class="btn btn-primary" style="align: right" (click)="printSelected()">Print Selected</Button></div>

isPrintinginProgress变量在开始时被初始化以隐藏元素，并在printSelected()函数中更新为true以显示元素。

import {Component, OnInit} from '@angular/core';
import * as jsPDF from 'jspdf';

export class PrintViewComponent implements OnInit {
  printList: PrintPendingOrderModel[];
  isPrintinginProgress = false;   

  dataSource = new MatTableDataSource<PrintPendingOrderModel>(this.printList);
  selection = new SelectionModel<PrintPendingOrderModel>(true, []);

  constructor(private apiService: ApisService,
          private utilService: UtilsService) { }
  ngOnInit() {


  }
   printSelected() {
     this.isPrintinginProgress = true; //showing up the progressbar         
     const doc = new jsPDF();    
     console.log('printing page:', page_no); 
     if (page_no < total_pages) {
        console.log('end page:', page_no);        
        doc.addPage();
     } else {
        doc.autoPrint({variant: 'non-conform'});        
        window.open(doc.output('bloburl'), '_blank').focus();
        console.log('Print Complete');       
        this.isPrintinginProgress = false; //hiding up the progressbar
     }
     this.selection.clear();
   }

} }

如果我将isPrintinginProgress初始化为true，则进度栏会显示在开头，但使用isPrintinginProgress的元素功能不会反映*ngif(show/hide)变量中的值更改

Answer 1

选项1

<div *ngIf="isPrintinginProgress" class="col-md-2 col-sm-2">
<mat-progress-bar mode="indeterminate" [value]="progressValue" ></mat-progress-bar>
</div>
<Button class="btn btn-primary" style="align: right" (click)="printSelected()">Print Selected</Button>

创建一个具有进度条的div，并且可以使用ngIf条件来隐藏或显示该div。

选项2

<div [hidden]="!isPrintinginProgress" class="col-md-2 col-sm-2">
<mat-progress-bar mode="indeterminate" [value]="progressValue" ></mat-progress-bar>
</div>
<Button class="btn btn-primary" style="align: right" (click)="printSelected()">Print Selected</Button>

您还可以使用[hidden]属性隐藏和显示。

Answer 2

可能未检测到更改。尝试下面的代码一次。

constructor( private cdr: ChangeDetectorRef){
}

this.isPrintinginProgress = false;
this.cdr.detectChanges();

Answer 3

注意：如果在控制台中获得Print Complete，则标志正在快速更改，因此您不会注意到更改。尝试超时。

printSelected() {
 this.isPrintinginProgress = true; //showing up the progressbar         
 this.setTimeout(()=>{
 const doc = new jsPDF();    
     console.log('printing page:', page_no); 
     if (page_no < total_pages) {
        console.log('end page:', page_no);        
        doc.addPage();
     } else {
        doc.autoPrint({variant: 'non-conform'});        
        window.open(doc.output('bloburl'), '_blank').focus();
        console.log('Print Complete');       
        this.isPrintinginProgress = false; //hiding up the progressbar
     }
 this.selection.clear();
 },3000);
}

Angular Material Progresbar不会显示/隐藏有* ngif

3 个答案: