如何将API返回的对象映射绑定到Angular的input文本输入框

错误原因 #

报错Property 'account_amount' does not exist on type 'string'的核心原因是你在组件中声明pages变量时指定的类型为字符串，但是你实际需要存储的是API返回的包含account_amount字段的对象，类型不匹配触发了TypeScript编译校验报错。

修复步骤 #

1. 首先定义和API返回结构匹配的TypeScript接口
   在networth-home.component.ts头部定义对应结构：

interface AccountPage {
  account_amount: string;
  // 此处补充API返回的其他所有字段
}

2. 修正组件中pages变量的类型声明
   把原来错误的string类型声明替换为上述接口类型，同时做好初始值兼容：

// 方式1：可选类型，初始值为undefined
pages?: AccountPage;

// 方式2：初始化空对象（更推荐，减少空判断）
pages: AccountPage = {
  account_amount: ''
}

3. 修正API响应赋值逻辑
   在接口请求的subscribe回调中，直接把返回的响应对象赋值给pages，不要把响应转成字符串或者只赋值单个字符串字段给pages：

this.mFinService.你的接口方法().subscribe(res => {
  this.pages = res;
})

4. 修正模板绑定写法
   如果是要把接口返回值填充到输入框内，不要绑定到placeholder属性，同时增加可选链判断避免初始加载报错：

<!-- 单向绑定输入框值 -->
<input class="input is-primary" type="text" [value]="pages?.account_amount">

<!-- 如果需要双向绑定，先在对应模块导入FormsModule，再用如下写法 -->
<input class="input is-primary" type="text" [(ngModel)]="pages?.account_amount">

<!-- 如果你确实需要把值作为占位符展示，写法如下 -->
<input class="input is-primary" type="text" [placeholder]="pages?.account_amount || '请输入账户金额'">

注意事项 #

如果使用双向绑定ngModel，需要在当前组件所属的NgModule的imports数组中引入FormsModule。

内容的提问来源于stack exchange，提问作者Praveenks