如何运行异步代码在同步代码之前结合表单

Question

到目前为止我有一个表单，我可以在其中将一些数据保存在 indexedDB 中（例如名称列表）并将它们显示为列表。当我单击该列表的条目时，将打开另一个表单，我可以在其中编辑我单击的名称。第二个表格应该和第一个表格完全一样，只是输入部分不是空的，而是填满了我点击的名字。

我的表单需要同步代码（据我所知）

myForm = new Formgroup({
    name: newFormControl('',[Validators.required])
});

我的第一次尝试是：

ngOnInit() {
    db.list.get({id: 1}, temp => this.names = temp);
    this.myForm.patchValue({name: this.names.name});
}

但是 get 是异步的并在 patchValue 之后解析，所以什么也没有发生。

所以我试过了：

ngOnInit() {
    db.list.get({id: 1}).then( function(names){
        this.myForm.patchValue({name: names.name});
    });
}

但是 myForm 是未知的，如果我在那个时候声明 myForm，我的 Form 会因为没有声明而感到不高兴。

现在我运行没主意了。

有人知道怎么解决吗？

Answer 1

您可以尝试使用 await 关键字

async ngOnInit() {
    const value = await db.list.get({id: 1}, temp => this.names = temp);
    this.myForm.patchValue({name: this.value.name});
}

how to run async code before sync code in combination with form