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

Вы можете использовать функцию toPromise для получения Promise-ориентированной логики c. Кроме того, функция должна возвращать Promise, чтобы вы могли использовать 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 следующим образом:

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

Также я написал рабочий образец здесь . Не забудьте открыть консоль браузера, чтобы увидеть результаты.

Надеюсь, это поможет!