Question

我无法使用AngularFire2使用存储在firebase中某个位置的数据预填充表单。该模板有多个输入，如：

<form (ngSubmit)="onSubmit(propertyForm.value)" #propertyForm="ngForm">
  <div class="form-group">
    <md-input-container>
      <input md-input placeholder="Postcode" type="text" id="postcode" required [(ngModel)]="model.postcode" name="postcode">
    </md-input-container>
  </div>
</form>

然后连接到具有模型（Property）的组件，构造函数直接链接到我想在表单中显示的对象。

export class PropertyFormComponent implements OnInit {

model: FirebaseObjectObservable<Property>;
  submitted = false;
  propertyForm;

  constructor(private propertyService: PropertyService, af: AngularFire) {
    this.model = af.database.object('/properties/MGQ34xmYDdT8IGLaj3zvBwZjWgW2');
  }
}

我知道对象路径是正确的，因为我可以提交表单并更新对象，但ngModel绑定不是加入Firebase对象而我无法弄清楚原因。我尝试用手工制作的对象替换Firebase对象，但效果很好。谢谢你的帮助！

Answer 1

Firebase对象是Observable，而不是普通的JS对象，这意味着您无法按原样应用ngModel。您实际上可以尝试将Observable转换为普通对象，这样就可以使用ngModel。

首先获取Observable然后订阅它：

constructor(private propertyService: PropertyService, af: AngularFire) {
  this.model = af.database.object('/properties/MGQ34xmYDdT8IGLaj3zvBwZjWgW2');
  this.model.subscribe(d => {this.model = d}); // add this line!
}

您现在可以使用普通对象：）

更好的选择是，如果您可以直接订阅该对象，但不必使用Firebase，我不确定这是否有效，但您可以尝试：

af.database.object('/properties/MGQ34xmYDdT8IGLaj3zvBwZjWgW2')
  .subscribe(d => { 
     this.model = d
  })

使用AngularFire2 Object Observable预填充表单

1 个答案: