导出Firebase数据并将其设置为模板驱动形式的默认输入 [英] Exporting firebase data and set it as default input in template driven form

问题描述

我正在创建一个使用角度为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 => {
 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（name）{
 this.invoiceForm.patchValue（{
 invoiceno：names.invoiceno 
}）; 
 console.log（names）; 
 
  

数组显示在控制台中。

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

p>

 < div class =form-group col-md-2> 
< label>发票编号< / label> 
< input formControlName =invoicenoclass =form-control> 
  

解决方案

this.patchValues（names）; 给你错误的原因是
$ b

无法读取patchValues属性undefined'

是因为你在代码中使用 function ，而不是使用fat-arrow-syntax。使用胖箭头，您可以保持 这个 。

所以不用这段代码
$ b $ $ p $ const datafetch = firebase.database（）。ref（）。child（'/ invoices'）。orderByKey（）。limitToLast（1）.once （函数（快照）{
const名称= [];
snapshot.forEach（function（childSnapshot）{
var childKey = childSnapshot.key;
var childData = childSnapshot.val（）;
names.push（childSnapshot.val（））;
}）;
name.push（names）;
console.log名称）; //这里是我需要
}以下的正确输出;


您需要使用胖箭头语法，然后 this $ b $ pre $ 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）;
}）;


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

Cannot read property of patchValues 'undefined'

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数据并将其设置为模板驱动形式的默认输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！