Question

我正在使用＆＃34; firebase-angular2＆＃34;构建非常简单的Angular2，它与Firebase对话。 npm模块。我设法让它毫无问题地发布到Firebase。

问题：

我不能做＆＃34;项目＆＃34;从＆＃34; itemsarr＆＃34;获取值，我得到错误：未捕获TypeError：无法设置属性＆＃39; items＆＃39;未定义的。我尝试直接设置：this.items.push（records.val（））;,但我得到同样的错误。
在第14行，我看到数组中的所有项目，但每次更新时都会在控制台数组中列出，所以如果我有50个项目，它将在控制台中列出50次。我知道我应该把它移到外面，但请看问题3。
第16行我在itemsarr中没有看到任何内容，它是空的？！

代码：

1 var itemsarr = [];
2 @Component({
     template:`
        <li *ngFor="#item of items">
          {{item.title}}
        </li>
     `
  })
3 export class AppComponent {
4
5   items:Array<string>;
6 
7   constructor() {
8     
9
10       myFirebaseRef.on('child_added', function(childSnapshot, prevChildKey) {
11          childSnapshot.forEach(function(records) {
12             this.items = itemsarr.push(records.val());
13          });
14          console.log(itemsarr)
15      });
16      console.log(itemsarr)
17     }
18   }
19 }

解决方案（感谢Thierry）

我需要设置＆＃34; = []＆＃34;首先是项目，然后转换为箭头功能，然后所有工作没有问题。我不知道箭头功能，这是以这种方式连接的。

1 
2 @Component({
     template:`
        <li *ngFor="#item of items">
          {{item.title}}
        </li>
     `
  })
3 export class AppComponent {
4
5   items:Array<string>=[];
6 
7   constructor() {
8     
9
10       myFirebaseRef.on('child_added', (childSnapshot, prevChildKey) => {
11          childSnapshot.forEach((records) => {
12             this.items.push(records.val());
13          });
14      
15      });
16 
17     }
18   }
19 }

Answer 1

您应该使用箭头功能来使用与组件本身对应的this关键字。

export class AppComponent {
  items:Array<string>;

  constructor() {
    myFirebaseRef.on('child_added', (childSnapshot, prevChildKey) => {
      childSnapshot.forEach((records) => {
        this.items = itemsarr.push(records.val());
      });
      console.log(itemsarr)
    });
    console.log(itemsarr);
  }
}

有关箭头函数词汇的更多提示，请参阅此链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions。

希望它可以帮到你，亨利

Answer 2

使用

childSnapshot, prevChildKey = { ... }

records => { ... }

而不是

function(childSnapshot, prevChildKey) { ... }

function(records) { ... }

Angular2 firebase检索并分配变量

2 个答案: