AngularFire2 在 Array 中嵌套了 *ngFor Array...但 Firebase 没有数组...? [英] AngularFire2 nested *ngFor Array within Array... but Firebase doesn't have arrays...?
问题描述
我正在使用 AngularFire2,试图从列表中获取列表.*ngFor 中的嵌套 *ngFor 不会显示在视图中...
应用程序组件
<预><代码>...构造函数(私有_af:AngularFire){this.lists = this._af.database.list(this._API_URL);}...app.component.html
{{sublist.name}}<br/><!-- 我能看见你--><!--******* 我看不见你 **********--><div *ngFor="let rootword of list.rootwords">{{rootword.word}} {{rootword.total}}
Firebase 示例
maindb|_list1||_name: '列表 1"||_词根||_苹果|||_word: '苹果'|||_总计:4||||_香蕉|||_word: '香蕉'|||_总计:2||_地毯|||_word: '地毯'|||_总计:21||_list2|_name: "列表 2"|_词根|_大象||_word: '大象'||_总计:4|_sloth|_word: '懒惰|_总计:5
如何将 ngFor 嵌套在带有 firebase.list 的 ngFor 中?我需要映射或过滤吗?AngularFire2 有办法把内部对象转成数组吗?
感谢所有建议!
您可以使用 map
操作符 和 Array.prototype.reduce
,像这样:
import 'rxjs/add/operator/map';构造函数(私有_af:AngularFire){this.lists = this._af.database.list(this._API_URL)//使用 map 操作符来替换列表中的每一项:.map(list => list.map(item => ({//映射到具有所有项目属性的新项目:...物品,//并用数组替换词根:词根:Object.keys(item.rootwords)//使用reduce来构建一个值数组:.reduce((acc, key) => [...acc, item.rootwords[key]], [])})));}
或者,没有展开语法:
import 'rxjs/add/operator/map';构造函数(私有_af:AngularFire){this.lists = this._af.database.list(this._API_URL).map(list => list.map(item => {var copy = Object.assign({}, item);copy.rootwords = Object.keys(item.rootwords).reduce((acc, key) => {acc.push(item.rootwords[key]);返回acc;}, []);返回副本;}));}
I'm using AngularFire2, trying to get lists out of lists. A nested *ngFor within an *ngFor doesn't show on the view...
app.componnent
...
constructor(private _af: AngularFire) {
this.lists = this._af.database.list(this._API_URL);
}
...
app.component.html
<div *ngFor="let list of lists | async">
{{sublist.name}}<br/> <!-- I can see you -->
<!--******* I can't see you **********-->
<div *ngFor="let rootword of list.rootwords">
{{rootword.word}} {{rootword.total}}
</div>
</div>
Example of Firebase
maindb
|_list1
| |_name: 'List 1"
| |_rootwords
| |_apple
| | |_word: 'apple'
| | |_total: 4
| |
| |_banana
| | |_word: 'banana'
| | |_total: 2
| |_carpet
| | |_word: 'carpet'
| | |_total: 21
|
|_list2
|_name: "List 2"
|_rootwords
|_elephant
| |_word: 'elephant'
| |_total: 4
|_sloth
|_word: 'sloth
|_total: 5
How do you nest an ngFor in an ngFor with firebase.list ?? Do I need to map or filter? Does AngularFire2 have a way to convert the inner object to an array?
All suggestions appreciated!
You can replace the rootwords
object with an array using the map
opererator and Array.prototype.reduce
, like this:
import 'rxjs/add/operator/map';
constructor(private _af: AngularFire) {
this.lists = this._af.database
.list(this._API_URL)
// Use map the map operator to replace each item in the list:
.map(list => list.map(item => ({
// Map to a new item with all of the item's properties:
...item,
// And replace the rootwords with an array:
rootwords: Object.keys(item.rootwords)
// Use reduce to build an array of values:
.reduce((acc, key) => [...acc, item.rootwords[key]], [])
})
));
}
Or, without the spread syntax:
import 'rxjs/add/operator/map';
constructor(private _af: AngularFire) {
this.lists = this._af.database
.list(this._API_URL)
.map(list => list.map(item => {
var copy = Object.assign({}, item);
copy.rootwords = Object.keys(item.rootwords).reduce((acc, key) => {
acc.push(item.rootwords[key]);
return acc;
}, []);
return copy;
}));
}
这篇关于AngularFire2 在 Array 中嵌套了 *ngFor Array...但 Firebase 没有数组...?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!