Angular 12: ngModel 变量在异步获取结果后未更新

Question

我知道这个问题很常见，但我已经做了一些研究，但没有找到适合我的情况的任何解决方案，我尝试了一些东西，比如 ngZone 和 setTimeout，但没有用。

我有一个使用 ngModel 的组件，该组件通过使用实用程序 class 的服务完成更新，您可以在下面查看：

component

ngOnInit(): void {
    this.init();
  }

  private async init() {
    this.initModel();
    this.initForm();
  }

  private async initModel() {
    await this.getId();
    this.getModel();
  }

  private async getId(): Promise<any> {
    return this.route.paramMap.subscribe((params) => {
      this._id = params.get('id'); 
    });
  }

  private async getModel() {
    console.log('getModel: '+this._id)
    if (this._id) {
      console.log('if')
      this.operationType = constants.COMPONENT.MAINTAIN.OPERATION_TYPE.PUT;
      
      (await this.session.apiManager.WorkerApi.getWorker(this._id)).subscribe(
        (response: any) => {
          this.worker = response
          console.log('await - ' + this.worker.name)
        }
      );
      
      console.log('after');
    }
    else 
      this.worker = new Worker("");
  }

我的服务classSession方法

public async getWorker(id: string): Promise<Observable<Worker>> {
    return await this.api.getData(this.REQUEST_URL + "/" + id);
}

我的工具APIclass方法

public getData(request?: String): Observable<any> {
    const requestUrl = this.URL + request;
    
    return this.http.get(requestUrl);
}

“有趣”的是，我在另一个组件中为另一个模型使用了相同的代码，并且它工作得很好，但在这里它不会在我的“get”回调后更新我的输入文本（如下）。

<input type="text" class="form-control" name="name" id="name" 
                required minlength="2" [(ngModel)]="this.worker.name">

你能帮我弄明白哪里出了问题吗？

提前致谢！

#编辑 1

我将 component 更改为使用 toPromise 并且我的 console.log 序列现在可以正常工作，但模型仍未更新。

新getModel()

  private async getModel() {
    console.log('getModel: '+this._id)
    if (this._id) {
      console.log('if')
      this.operationType = constants.COMPONENT.MAINTAIN.OPERATION_TYPE.PUT;
      
      this.worker = (await (await this.session.apiManager.WorkerApi.getWorker(this._id)).toPromise());
      console.log('toPromise: '+this.worker.name);
      
      console.log('after');
    }
    else 
      this.worker = new Worker("");
  }

#编辑 2

我刚刚意识到我也无法通过我的 ts 代码获取输入值，这只是证明问题出在我的 two-way 数据绑定上（我猜）。当我在我的 onSubmit 事件中调用 this.worker.name 时，模型是空的，即使输入已填充。

这让我想知道问题的标题是否有误...也许“Two-way ngModel 数据绑定不起作用”更合适...

Answer 1

好吧，我是在按照@H3AR7B3A7 和@Raphaël Balet 的建议创建 stackblitz 时想出来的。发生的事情是我有一个额外的 HTML 代码使用 [formGroup]:

<form novalidate #form="ngForm" [formGroup]="formGroup" (ngSubmit)="onSubmit(form)">

这意味着，我试图同时使用 ngModel 和 angular 反应形式的双向数据绑定，但不知何故 angular 迷失了方向，我的模型无法正常工作。我需要做的就是删除 [formGroup]="formGroup" 并且它运行良好。

另外，给未来的观众一个提示，stackblitz 帮助我提供了比我的浏览器更精确的错误消息，因此它帮助我解决了我的应用程序中的其他错误，例如 null 注入。

Angular 12: ngModel 变量在异步获取结果后未更新

Angular 12: ngModel variable not updating after async get result

angular

mean-stack

angular-ngmodel

angular12

#编辑 1

#编辑 2