1

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

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

VideoDataSource最后在'./videoDataSource.model.ts'中编写了一个实现MatTableDataSource接口的类。其中，有一个方法叫做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()这足以解决问题。关于发生了什么的任何见解？提前谢谢了！

4

1 回答 1

4

发生了什么？

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

具体在哪里？

在app.component.ts，你有这条线 -

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

解决方法是什么？ 

async ngOnInit() {

为什么？！

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

一般如何调试这些问题？

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

好吧！好吧！但是错误会消失吗？它有效吗？

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

于 2020-01-24T22:07:22.163 回答