Угловой материал ожидает завершения рендеринга на носителе 'print' - PullRequest
0 голосов
/ 29 августа 2018

У меня проблема с Angular Material и Media Print, когда я использую window.print (); страница для печати не перерисовывается, например, в таблицах показаны полосы прокрутки, как мне ждать окончания перерисовки? мой код прост:

  Print() {
    window.print();
  }

это внутри компонента.

на моем scss у меня есть носитель для печати:

@media print {
  body,
  html {
      transition: none !important;
      * {
          transition: none !important;
      }
  }
  .noprinted {
      display: none !important;
  }
  .mat-sidenav-content {
      margin: 10px !important;
  }
  .flatprint {
      box-shadow: none !important;
  }
  .mat-drawer-container {
      background-color: white !important;
  }
  .closeButton {
      display: none !important;
  }
}

мой шаблон такой:

    <div style="position:relative">
      <mat-card [ngClass]="getColor()" class="mat-elevation-z10 flatprint">
        <mat-card-header>
          <div *ngIf="Icono" mat-card-avatar fxFlex="60px" fxLayoutAlign="center center">
            <ng-container *ngIf="HasFontawesomeIcon">
              <fa-icon [icon]="['fas', Icono]" size="3x"></fa-icon>
            </ng-container>
            <ng-container *ngIf="!HasFontawesomeIcon">
              <mat-icon class="icon-large">{{Icono}}</mat-icon>
            </ng-container>
          </div>
          <mat-card-title>{{Titulo}}</mat-card-title>
          <mat-card-subtitle>{{Descripcion}}</mat-card-subtitle>

          <div class="mat-card-action-button-1" fxLayout="row wrap" fxLayoutGap="10px">
            <button *ngIf="ShowAdd" mat-mini-fab class="bg noprinted" [ngClass]="addBtnClass" (click)="clickAdd()">
              <mat-icon>add</mat-icon>
            </button>
            <button *ngIf="ShowPrint" mat-mini-fab class="bg noprinted" [ngClass]="addBtnClass" (click)="Print()">
              <mat-icon>print</mat-icon>
            </button>
            <button *ngIf="ShowMore" mat-mini-fab class="bg noprinted" [ngClass]="addBtnClass" (click)="openBottomSheet()">
              <mat-icon>more_horiz</mat-icon>
            </button>
          </div>
          <span class="relleno"></span>
          <ng-content select="[my-card-header]"></ng-content>
        </mat-card-header>
        <ng-content select="[my-card-body]"></ng-content>
        <mat-card-content style="overflow: auto;">
          <ng-content select="[my-card-content]"></ng-content>
        </mat-card-content>
        <mat-card-footer #myCardFooter [ngClass]="{'hideElement':!showFooter}">
          <ng-content select="[my-card-footer]"></ng-content>
        </mat-card-footer>
      </mat-card>
    </div>

это результат, часть подсветки показывает полосу прокрутки, но я использую fxFlex = "100%", поэтому я не ожидаю увидеть полосы прокрутки:

this is the sample

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...