Javascript Angular2火基检索和分配变量

我正在使用“Firebase-Angular2”npm模块构建与Firebase对话的非常简单的Angular2。我设法毫无问题地把它发到了Firebase

问题：

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 }

我无法使“items”从“itemsarr”获取值，我获取错误：未捕获类型错误：无法设置未定义的属性“items”。我尝试直接设置：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 }

1 var itemsar=[]；
2@组件({
模板：`

{{item.title}

` }) 3导出类AppComponent{ 4. 5项：阵列； 6. 7.建造师（）{ 8. 9 10 myFirebaseRef.on（'child_added'，函数（childSnapshot，prevChildKey）{ 11 childSnapshot.forEach（函数（记录）{ 12 this.items=itemsarr.push（records.val（））； 13 }); 14控制台日志（itemsarr） 15 }); 16控制台日志（itemsarr） 17 } 18 } 19 } 解决方案（谢谢Thierry）

我需要先将“=[]”设置为items，然后转换为箭头函数，然后所有函数都可以正常工作。我不知道arrow函数和它是以这种方式连接的

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 }

1
2@组件({
模板：`

{{item.title}

`
})
3导出类AppComponent{
4.
5项：数组=[]；
6.
7.建造师（）{
8.
9
10 myFirebaseRef.on（'child_added'，（childSnapshot，prevChildKey）=>{
11 childSnapshot.forEach（（记录）=>{
12.items.push（records.val（））；
13          });
14
15      });
16
17     }
18   }
19 }

您应该使用箭头功能，以便能够使用组件本身对应的

此

关键字

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);
  }
}

导出类AppComponent{
项目：阵列；
构造函数（）{
myFirebaseRef.on（'child_added'，（childSnapshot，prevChildKey）=>{
childSnapshot.forEach（（记录）=>{
this.items=itemsarr.push（records.val（））；
});
console.log（itemsarr）
});
console.log（itemsarr）；
}
}

有关此箭头函数词法的更多提示，请参阅此链接：

希望它能帮助你， 蒂埃里

使用

childSnapshot, prevChildKey = { ... }

records => { ... }

而不是

function(childSnapshot, prevChildKey) { ... }

function(records) { ... }