Angular 8 MatDialog 等待结果继续

Question

我正在解析 excel 表格，但如果用户需要选择的表格不止 1 张。我想用一个对话框来做到这一点，该函数需要等到结果出现。

我的代码：

app.component.ts:

onFileSelected(file: File): void {
       const reader: FileReader = new FileReader();
       reader.onload = async (e: any) => {
         // read workbook
         const bstr: string = e.target.result;
         const wb: XLSX.WorkBook = XLSX.read(bstr, {
           type: "binary",
           sheetRows: 101
         });

         this.sheetNames = wb.SheetNames;

         if (this.sheetNames.length > 1) {
           console.log("größer eins");
           await this.openDialog();
         }
         // grab first sheet
         const wsname: string = wb.SheetNames[this.sheetIndex];
         const ws: XLSX.WorkSheet = wb.Sheets[wsname];

         this.data = XLSX.utils.sheet_to_json(ws, { header: 0 });
       };
       reader.readAsBinaryString(this.uploadComponent.file);
}

openDialog(): void {
 const dialogRef = this.chooseSheetDialog.open(ChooseSheetDialogComponent, {
   width: "500px",
   data: { sheets: this.sheetNames }
 });

 dialogRef.afterClosed().subscribe(result => {
   console.log("The dialog was closed " + result);
   this.sheetIndex = result;
 });
}

这是一种缩写形式。

dialog.ts：

 export class ChooseSheetDialogComponent {
   selectFormControl = new FormControl("", Validators.required);
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: any,
     public dialogRef: MatDialogRef<ChooseSheetDialogComponent>
   ) {}

   onNoClick(): void {
     this.dialogRef.close();
   }
 }

对话框.html：

<h1 mat-dialog-title>Wähle aus</h1>
<div mat-dialog-content>
<p>Es existieren mehrere Arbeitsblätter / Tabellen. Bitte wähle.</p>
<mat-form-field>
 <mat-label>Favorite sheet</mat-label>
 <mat-select required [formControl]="selectFormControl">
   <mat-option *ngFor="let sheet of data.sheets" [value]="sheet">
     {{sheet}}
   </mat-option>
 </mat-select>
 <mat-error *ngIf="selectFormControl.hasError('required')">
   This field is required
 </mat-error>
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No Thanks</button>
<button mat-button [mat-dialog-close]="selectFormControl.value" cdkFocusInitial>Ok</button>
</div>

但是是的但是await this.openDialog();不起作用。浏览器中的错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property '!ref' of undefined
TypeError: Cannot read property '!ref' of undefined
    at AppComponent.getExcelHeaderRow (app.component.ts:121)

Answer 1

您可以使用toPromisefunction 以获得面向 Promise 的逻辑。此外，该函数必须返回 aPromise以便您await以后可以使用：

async openDialog(): Promise<number> {
 const dialogRef = this.chooseSheetDialog.open(ChooseSheetDialogComponent, {
   width: "500px",
   data: { sheets: this.sheetNames }
 });

 return dialogRef.afterClosed()
   .toPromise() // here you have a Promise instead an Observable
   .then(result => {
      console.log("The dialog was closed " + result);
      this.sheetIndex = result;
      return Promise.resolve(result); // will return a Promise here
   });
}

然后，您的onFileSelected函数可以使用await如下：

async onFileSelected(file: File): void {
    const result = await this.openDialog(); // waiting here
    console.log('result', result); // you got the value
}

另外，我在这里写了一个工作示例。不要忘记打开浏览器的控制台查看结果。

我希望它有帮助！