保存后无法显示输入的数字答案

【问题标题】：unable to display input number after save保存后无法显示输入的数字
【发布时间】：2021-06-18 17:10:51
【问题描述】：

所以我有一个输入名称age，另一个输入名称ageDif，ageDif 是只读的并且取决于年龄。保存后，我重新绑定 ageDif 和年龄。如下例，age 的输入值 20 保存后显示，但 ageDif 输入框保存后没有显示值。但是，我 console.log 两个值，它们都有正确的值，只显示一个。

html文件

<div>
  <label>Age</label>
  <input required name="age" id="age" (keypress)="justnumeric($event);" (change)="calculateAgeDif()" [(ngModel)]="age"/>
</div>
  <label>Age Difference</label>
  <input name="age difference"  [(ngModel)]="ageDif"/>
</div>
</div>
  <label>Save</label>
  <input type ="button" (click)="saveAge()"/>
</div>

ts。文件

justnumeric(event): boolean {    
      let pattern = /^([0-9])$/;
      let result = pattern.test(event.key);
      return result;
  }

  calculateAgeDif(){
    this.ageDif = 50- this.age;
  }

  saveAge(){
  this.saveAgeService.save(this.ageDif, this.age).pipe(first()).subscribe(res => {
    this.ageDif = res.ageDif;
    this.age = res.ageDif;
    console.log(this.ageDif);   //30 
    console.log(this.age);     //20 
  }
}

【问题讨论】：

标签： javascript angular typescript angular8 two-way-binding

【解决方案1】：

这对我有用。

如果它不适合你，那么你可以实现ChangeDetection。这样您就可以在使用 API 后强制检测更改。

更正： 您在age 变量中分配ageDif。

建议： 如果要生成第二个input，则将disabled 添加到input。

我已将解决方案添加到 Stackblitz。

【讨论】：