*ngif 不显示/隐藏 Angular 材质进度条答案

【问题标题】：Angular Material Progresbar is not shown/hidden with *ngif*ngif 不显示/隐藏 Angular 材质进度条
【发布时间】：2019-12-10 05:18:23
【问题描述】：

我有一个应用程序，其中网页需要显示进度条，同时网站从多个 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) 的元素功能中

【问题讨论】：

看起来它可能会在控制台中抛出错误，停止执行将其设置为 false。尝试将错误条件放在 else 块的开头。
只能在else条件下运行吗，你能检查一下吗？
控制台有什么错误吗？
控制台中没有错误。是的，它仅在 printSelected() 方法中执行。并且更改为起跑台并没有做出任何改变
如果我评论 this.isPrintinginProgress = false;新窗口打开后显示进度条，构建的pdf，可能是jsPdf阻塞了模板中的更改？

标签： angular typescript angular-material jspdf

【解决方案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，该 div 可以使用 ngIf coniditon 隐藏或显示。

选项 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] 属性来隐藏和显示。

【讨论】：

试过了，两个选项都没有变化，模板无法识别变量的变化。
你能把代码放在 SlackBliz 上，这样更容易尝试吗？
变量 isPrintinginProgress 是否将其值从 true 更改为 false 或反之亦然？
是的，变量值在运行良好的执行中被更改，唯一的问题是它不会显示在模板上。
你能把代码放在 StackBlitz 上，以便制定解决方案

【解决方案2】：

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

constructor( private cdr: ChangeDetectorRef){
}

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

【讨论】：

添加了这个，没有变化。

【解决方案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);
}

【讨论】：

实际上打印完成需要一些时间，并且窗口似乎在那段时间冻结。