使用 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
  })