如何將 Angular 和 output 數據中的此錯誤修復為 PDF？

Question

我正在嘗試使用模式中的按鈕將 output 數據發送到 PDF，該按鈕也顯示相同的數據。 我的數據顯示在模式中沒有問題，但我正在嘗試創建一個選項，以便將結果下載到 PDF。我一直在關注教程，但當前在加載我的 web 時在控制台中收到錯誤應用

core.js:6479 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[MatDialogRef -> MatDialogRef -> MatDialogRef]: 
  NullInjectorError: No provider for MatDialogRef!
NullInjectorError: R3InjectorError(AppModule)[MatDialogRef -> MatDialogRef -> MatDialogRef]: 
  NullInjectorError: No provider for MatDialogRef!

我有一個單獨的組件，僅用於保存模態的數據和標記，因此我也在嘗試在我的 auth-layout.component.ts 中實現 PDF 選項的功能

這是我的 auth.component.html

<h2 mat-dialog-title>Order Summary</h2>
<div mat-dialog-content id="output" id="output">
  <div>
    <strong>Menu items:</strong>
    <tr *ngFor="let item of invoice.serviceItems">
      &nbsp;{{ item.serviceName }} ({{item.servicePrice | currency}})
    </tr>
    <br /> Subtotal: {{ invoice.getTotal() | currency }}
  </div>
  <hr />
  <p>
    Labor Cost: {{ invoice.getLaborTotal() | currency }}
  </p>
  <hr />
  <p style="font-weight: bold;">Invoice total: {{ invoice.getInvoice() | currency }}</p>
</div>
<div mat-dialog-actions align="end">
  <button mat-raised-button matDialogClose="cancel" color="primary">Cancel order</button>
  <button mat-raised-button matDialogClose="confirm" color="accent" (click)="openPDF()">Confirm order</button>
</div>

這是 auth-layout.component.ts

import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogModule} from '@angular/material/dialog';
import { Component, OnInit, Input, ElementRef, ViewChild, Inject } from '@angular/core';
import { Invoice } from '../invoice';

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

@Component({
  selector: 'app-auth-layout',
  templateUrl: './auth-layout.component.html',
  styleUrls: ['./auth-layout.component.css']
})
export class AuthLayoutComponent implements OnInit {

  invoice: Invoice;
  @ViewChild("output", {
    static: true
  }) output: ElementRef;


  constructor(private dialogRef: MatDialogRef < AuthLayoutComponent > , @Inject(MAT_DIALOG_DATA) data: any) {
    this.invoice = data.invoice;
    console.log(this.invoice);
  }

  openPDF() {
    const data = this.output.nativeElement;
    const doc: jsPDF = new jsPDF("p", "mm", "a4");
    doc.html(data, {
      callback: (doc) => {
        doc.output("dataurlnewwindow");
      }
    });
  }

  ngOnInit(): void {}
}

我的 services.component.ts 也是，我實際打開模式的地方

import { Observable } from 'rxjs';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { ServiceHelper } from '../services.service';
import { ServiceItem } from '../services.interface';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import {MatSnackBar} from '@angular/material/snack-bar';
import { FormsModule } from '@angular/forms';
import { Invoice } from '../invoice';
import { AuthLayoutComponent } from './../auth-layout/auth-layout.component';
import { jsPDF } from "jspdf";
import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-services',
  templateUrl: './services.component.html',
  styleUrls: ['./services.component.css']
})

export class ServicesComponent {

  @ViewChild("output", {
    static: true
  }) output: ElementRef;


  serviceItems: ServiceItem[];
  invoice: Invoice; //from invoice.ts

  constructor(private dialog: MatDialog, private serviceHelper: ServiceHelper, private _snackBar: MatSnackBar) {

    this.invoice = new Invoice();
    this.serviceItems = serviceHelper.getServices();
  }

  clearInvoice(): void {
    /**
     * Iterate over the beverages array and set each objects checked property to false.
     */
    for (let service of this.serviceItems) {
      service.checked = false;
    }

    this.invoice = new Invoice(); // return a new instance of the Bill object.
  }


  openSnackBar(message: string) {
    this._snackBar.open(message + " was added!");
  }

  //Opens modal with calculated results
  submit() {

    console.log(this.serviceItems)


    for (let item of this.serviceItems) {
      if (item.checked) {
        this.invoice.addServiceItem(item);
      }
    }

    console.log(this.invoice.serviceItems);
    console.log(this.invoice.getTotal());

    const dialogRef = this.dialog.open(AuthLayoutComponent, {
      data: {
        invoice: this.invoice
      },
      disableClose: true,
      width: '800px'
    })


    dialogRef.afterClosed().subscribe(result => {
      if (result === 'confirm') {
        alert('Your order has been processed!');
        this.clearInvoice();
      } else {
        alert('Your order has been canceled.');
        this.clearInvoice();
      }
    })

  }
}

Answer 1

你把 MatDialogModule 添加到你的 app.module.ts 了嗎？

它應該看起來像這樣

import {MatDialogModule} from '@angular/material/dialog';

@NgModule({
  ...
  imports: [
    ...
    MatDialogModule
    ...
  ]
})

export class AppModule {}

https://material.angular.io/components/dialog/api