Angular 8 MatDialog等待结果继续 [英] Angular 8 MatDialog await the result to continue

问题描述

我正在解析excel工作表，但是如果不止1个工作表，则用户需要选择.我想通过对话框来执行此操作，该功能需要等到结果在那里.

I'm parsing excel sheets but If there are more than just 1 sheet the user needs to choose. I want to do this with a dialog and the function needs to wait until the result is there.

我的代码:

app.component.ts:

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:

The 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();
   }
 }

dialog.html:

dialog.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>

但是可以，但是等待this.openDialog(); 不起作用.浏览器错误:

But yes however await this.openDialog(); does not work. Error in the browser:

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)

推荐答案

您可以使用 toPromise 函数，以具有面向Promise的逻辑.此外，该函数必须返回 Promise ，以便以后可以使用 await :

You can use toPromise function in order to have a Promise-oriented logic. Also, the function must return a Promise so that you can use await later:

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 :

Then, your onFileSelected function can use await as follows:

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

此外，我在此处编写了一个工作示例.不要忘记打开浏览器控制台以查看结果.

Also, I wrote a working sample here. Don't forget to open the browser's console to see the results.

希望对您有帮助！

这篇关于Angular 8 MatDialog等待结果继续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！