问题描述
我正在解析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等待结果继续的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!