StackBlitz 中的错误：“意外的严格模式保留字”尝试将 async/await 与 subscription.toPromise() 一起使用

Question

我在 StackBlitz here 上设置了 Angular webapp 的一部分。

在其中，我正在尝试使用来自具有过滤、分页和排序功能的 firebase 的数据来实现 mat-table 的最佳方法。

最终编写了一个实现 MatTableDataSource 接口的类，名为 VideoDataSource in './videoDataSource.model.ts'。其中，有一个名为loadMatches() 的方法。这是一个async 方法：

async loadMatches(): Promise<any>{
    console.log("loadMatches entered");
    let results = await this.dbService.getMatchesV2().toPromise();
    console.log("results in loadMatches");
    console.log(results);
    let dbMatches = results.map(Match.fromJson);
    return dbMatches.toPromise();
  }

其中dbService.getMatchesV2() 又来自注入服务，如下所示：

getMatchesV2(){
    return this.db.list<Match>('/matches').valueChanges();
  }

其中 db 是 AngularFireDatabase 类型的数据库服务的参数。

app.component.ts 中的loadMatches() 调用如下所示：

this.data = await this.dataSource.loadMatches();

其中 data 是 AppComponent 的参数，类型为 Match[]。

我收到错误“意外的严格模式保留字”，引用了没有任何意义的行号（在 app.module.ts 中；我想这是编译后的行号？） .问题在我尝试实现 async/await 后立即开始。 DatabaseService 主要处理 Observables，但我认为.toPromise() 足以解决问题。关于发生了什么的任何见解？非常感谢！

Answer 1

发生了什么？

保留关键字错误是由您的内部依赖项之一引发的。

具体在哪里？

在app.component.ts，你有这行 -

this.data = await this.dataSource.loadMatches();

解决方法是什么？

async ngOnInit() {

为什么？！

由于您使用的是await，因此您在其中使用await 的函数需要标记为async。 await 表达式只允许在 async 函数中使用。在您的情况下，它是ngOnInit。 （记得在其他地方也这样做）。你可以在Typescript 1.7's release notes阅读更多内容

一般如何调试这些问题？

这是问题不在您实际寻找的地方的情况之一。因此，对 linter 错误进行常规检查（所有的 linter 错误！），并在不同的浏览器中尝试会有所帮助。您可能会在不同的浏览器中得到不同的错误和堆栈跟踪。

好的！好的！但是错误会消失吗？有用吗？

给你 - https://stackblitz.com/edit/angular-tmgbw7?file=src%2Fapp%2Fapp.component.ts