导出 firebase 数据并将其设置为模板驱动形式的默认输入

问题描述

当然，我正在使用 angular 4.0.2、angularfire2 和 firebase 创建一个应用程序.问题是我无法使用来自 angularfire2 的数据并将其设置为模型驱动或反应形式中使用的输入的默认输入值.这是我的 add-invoice.component.ts 代码

ngOnInit(){const datafetch = firebase.database().ref().child('/invoices').orderByKey().limitToLast(1).once('value').then(snapshot => {常量名称 = [];快照.forEach(函数(子快照){var childKey = childSnapshot.key;var childData = childSnapshot.val();名称.push(childSnapshot.val());});this.patchValues(names);});this.invoiceForm = this.fb.group({发票号码: ''，itemRows: this.fb.array([this.initItemRows()])});}补丁值(名称){this.invoiceForm.patchValue({发票:names.invoiceno});控制台日志(名称)；}

数组显示在控制台中.

这是我的表单，即 add-invoice.component.html

<label>发票编号</label><input formControlName="invoiceno" class="form-control">

解决方案

this.patchValues(names); 给你错误的原因

无法读取 patchValues 'undefined' 的属性

是因为您在代码中使用了 function，而不是 fat-arrow-syntax.使用胖箭头，您可以保留 this 的上下文.

所以，而不是这段代码(来自您未经编辑的帖子):

const datafetch = firebase.database().ref().child('/invoices').orderByKey().limitToLast(1).once('value').then(function(snapshot) {常量名称 = [];快照.forEach(函数(子快照){var childKey = childSnapshot.key;var childData = childSnapshot.val();名称.push(childSnapshot.val());});name.push(names);控制台日志(名称)；//下面是我需要的正确输出});

您需要使用粗箭头语法，然后 this 将不会是未定义的:

 const datafetch = firebase.database().ref().child('/invoices').orderByKey().limitToLast(1).once('value').then(snapshot => {常量名称 = [];快照.forEach(childSnapshot => {var childKey = childSnapshot.key;var childData = childSnapshot.val();名称.push(childSnapshot.val());});this.patchValues(names);});

I am creating an app using angular 4.0.2, angularfire2, and firebase, off course. What the problem is I am not able to use the data from angularfire2 and set it as default input value of an input used in model-driven or reactive form.Here is my code for add-invoice.component.ts

ngOnInit(){
  const datafetch = firebase.database().ref().child('/invoices').orderByKey().limitToLast(1).once('value').then(snapshot => {
    const names = [];
    snapshot.forEach(function(childSnapshot) {
      var childKey = childSnapshot.key;
      var childData = childSnapshot.val();
      names.push(childSnapshot.val());
    });
    this.patchValues(names);
  });

  this.invoiceForm = this.fb.group({
    invoiceno: '',
    itemRows: this.fb.array([this.initItemRows()])
  });
}

patchValues(names){
  this.invoiceForm.patchValue({
    invoiceno: names.invoiceno
  });
  console.log(names);
}

Array being Shown up in console.

Here is my form i.e. add-invoice.component.html

<div class="form-group col-md-2">
<label>Invoice No.</label>
<input formControlName="invoiceno" class="form-control">

解决方案

The reason for that this.patchValues(names); gave you error

was because you are using function in your code, instead of fat-arrow-syntax. With fat-arrow you keep the context of this.

So instead of this piece of code (from your unedited post):

const datafetch = firebase.database().ref().child('/invoices').orderByKey().limitToLast(1).once('value').then(function(snapshot) {
  const names = [];
  snapshot.forEach(function(childSnapshot) {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    names.push(childSnapshot.val());
  });
  name.push(names);
  console.log(name); // Here is the correct output I need below
});

You need to use fat-arrow syntax and then this will not be undefined:

  const datafetch = firebase.database().ref().child('/invoices').orderByKey().limitToLast(1).once('value').then(snapshot => {
    const names = [];
    snapshot.forEach(childSnapshot => {
      var childKey = childSnapshot.key;
      var childData = childSnapshot.val();
      names.push(childSnapshot.val());
    });
    this.patchValues(names);
  });

这篇关于导出 firebase 数据并将其设置为模板驱动形式的默认输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！