使用 AngularFire2 Object Observable 预填充表单

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>

然后连接到具有模型 (属性) 的组件，构造函数直接链接到我要在表单中显示的对象。

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 预填充表单

Prefill form using AngularFire2 Object Observable

typescript

angularfire2

angular