Angular 8中如何从Payload提取字段并绑定至HTML表单？

我一眼就看出问题所在了——数据处理时的变量覆盖错误和表单绑定路径不匹配是导致无法正常显示字段的核心原因，咱们一步步来修复：

1. 修复组件中的数据订阅逻辑 #

你当前的代码犯了一个典型错误：把原本是Observable类型的table$直接赋值成了JSON字符串，这就导致后续根本没法通过.来访问对象属性。咱们需要单独定义一个变量来存储从Firebase拿到的实体数据，别去覆盖Observable变量：

// 先声明一个变量专门存表单数据，初始化为空对象避免报错
tableData: any = {};

// 保持table$作为Observable（如果后续不需要复用这个流，也可以直接订阅不赋值）
this.productService.get(id)
  .map(actions => {
    const id = actions.payload.key;
    const data = actions.payload.val();
    return { id, data }; // 这里返回的是包含id和字段数据的对象
  })
  .subscribe(res => {
    this.tableData = res; // 将接口返回的数据赋值给tableData
    console.log("Value from Firebase", this.tableData);
  });

2. 修正HTML表单的双向绑定路径 #

根据你控制台输出的结构，字段都嵌套在data属性里，同时之前有两个input没加双向绑定符号，现在一起修正：

<form #f="ngForm" (ngSubmit)="save(f.value)">
  <div class="form-group">
    <label for="countryname">Country Name</label>
    <input #countryname="ngModel" [(ngModel)]="tableData.data.countryname" name="countryname" id="countryname" type="text" class="form-control" required >
    <div class="alert alert-danger" *ngIf="countryname.touched && countryname.invalid">
      Country Name is required..!
    </div>
  </div>
  <div class="form-group">
    <label for="currencyname">Currency Name</label>
    <input #currencyname="ngModel" [(ngModel)]="tableData.data.currencyname" name="currencyname" id="currencyname" type="text" class="form-control" required >
    <div class="alert alert-danger" *ngIf="currencyname.touched && currencyname.invalid">
      Currency Name is Required
    </div>
  </div>
  <div class="form-group">
    <label for="alphacode">Alpha Code</label>
    <input #alphacode="ngModel" [(ngModel)]="tableData.data.alphacode" name="alphacode" id="alphacode" type="text" class="form-control" required >
    <div class="alert alert-danger" *ngIf="alphacode.touched && alphacode.invalid">
      Alpha Code is required..!
    </div>
  </div>
  <div class="form-group">
    <label for="numericcode">Numeric Code</label>
    <div class="input-group">
      <span class="input-group-text">$</span>
      <input #numericcode="ngModel" [(ngModel)]="tableData.data.numericcode" name="numericcode" id="numericcode" type="number" class="form-control" required>
    </div>
    <div class="alert alert-danger" *ngIf="numericcode.touched && numericcode.invalid">Price Required</div>
  </div>
  <div class="form-group">
    <mat-radio-group aria-label="Select an option" [(ngModel)]="tableData.data.status" name="status">
      <mat-radio-button value="1">Active</mat-radio-button>
      <mat-radio-button value="2">In-Active</mat-radio-button>
    </mat-radio-group>
  </div>
  <button class="btn btn-primary">Save</button>
</form>

几个关键注意事项 #

• 别覆盖Observable变量：table$原本是用来承载数据流的，你把它改成字符串后，不仅丢了Observable的特性，还没法访问对象属性，这是最核心的错误。
• 绑定路径要完全匹配数据结构：控制台输出的结构是{id: "...", data: {alphacode: "...", ...}}，所以绑定必须写成tableData.data.字段名才能取到值。
• 双向绑定要写全：之前的alphacode和numericcode只写了ngModel，没加[(...)]，这样只能单向显示，没法同步修改后的值。
• 单选框也要加绑定：我给单选框补上了[(ngModel)]和name属性，这样选中状态会同步到数据里，提交表单时能拿到这个值。

这样修改后，表单就能正确显示从Firebase获取的字段值，并且支持双向绑定修改了。

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