使用 Angularfire2 按键排除项目
Exclude items by key with Angularfire2
我有一个 Firebase 数据库 JSON:
"help_text": [{
"Name": "Blue Dye",
"Max Stack": 5,
"Potion Quantity": 1,
"Price": 10,
"Stackable": true
},
{
"Name": "Blue Gem",
"Max Stack": 20,
"Price": 200,
"Quest Item": true,
"Stackable": true
},
{
"Name": "Blue Gem Fragment",
"Max Stack": 20,
"Price": 50,
"Quest Item": true,
"Stackable": true
},
{
"Name": "Blue Flower",
"Max Stack": 20,
"Mesh Y": -0,
"Model": "blue_flower",
"Price": 5,
"Stackable": true
}
...etc etc...
我正在使用 Angular 4 将 Name
字段输出为 headers 并将单个项目输出为列表项目:
app.help-screen component.html
<div class="help-item-box" *ngFor="let item of items | async">
<h2 class="help-item-title">{{item.Name}}</h2>
<ul class="help-item-properties">
<li *ngIf="item['Potion Quantity']">Potion Quantity: {{ item["Potion Quantity"] }}</li>
<li *ngIf="item.Price">Price: {{ item.Price }}</li>
<li *ngIf="item.Stackable">Stackable: {{ item.Stackable }}</li>
<li *ngIf="item['Quest Item']">Quest Item: {{ item["Quest Item"] }}</li>
<li *ngIf="item['Max Stack']">Max Stack: {{ item["Max Stack"] }}</li>
</ul>
</div>
app-help-screen.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
@Component({
selector: 'app-help-screen',
templateUrl: './app-help-screen.component.html',
styleUrls: ['./app-help-screen.component.css']
})
export class HelpScreenComponent implements OnInit {
items: FirebaseListObservable<any[]>;
constructor(db: AngularFireDatabase) {
this.items = db.list('help_text');
console.log(this.items);
}
ngOnInit() {
}
}
这可行,但不是很优雅,意味着每次添加带有新 属性 的 object 时都必须重写数据库代码。我最想做的是将所有字段输出为列表项,不包括名称、模型名称和网格放置值。查看 Angularfire2 文档:
https://github.com/angular/angularfire2/blob/master/docs/4-querying-lists.md
似乎没有办法通过键从查询中排除项目。肯定有一种方法可以使用 Firebase 和 Angularfire2?
执行这样的基本查询
Firebase 不支持排除,如果您试图在查询中这样做的话。如果要排除字段,则需要创建单独的集合。
对于你的情况,对于我收集到的你想要完成的事情,有一个更简单的解决方案。您可以遍历视图中的所有 Object.keys(item)
并打印出键和值(只要键不是名称)。
我有一个 Firebase 数据库 JSON:
"help_text": [{
"Name": "Blue Dye",
"Max Stack": 5,
"Potion Quantity": 1,
"Price": 10,
"Stackable": true
},
{
"Name": "Blue Gem",
"Max Stack": 20,
"Price": 200,
"Quest Item": true,
"Stackable": true
},
{
"Name": "Blue Gem Fragment",
"Max Stack": 20,
"Price": 50,
"Quest Item": true,
"Stackable": true
},
{
"Name": "Blue Flower",
"Max Stack": 20,
"Mesh Y": -0,
"Model": "blue_flower",
"Price": 5,
"Stackable": true
}
...etc etc...
我正在使用 Angular 4 将 Name
字段输出为 headers 并将单个项目输出为列表项目:
app.help-screen component.html
<div class="help-item-box" *ngFor="let item of items | async">
<h2 class="help-item-title">{{item.Name}}</h2>
<ul class="help-item-properties">
<li *ngIf="item['Potion Quantity']">Potion Quantity: {{ item["Potion Quantity"] }}</li>
<li *ngIf="item.Price">Price: {{ item.Price }}</li>
<li *ngIf="item.Stackable">Stackable: {{ item.Stackable }}</li>
<li *ngIf="item['Quest Item']">Quest Item: {{ item["Quest Item"] }}</li>
<li *ngIf="item['Max Stack']">Max Stack: {{ item["Max Stack"] }}</li>
</ul>
</div>
app-help-screen.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
@Component({
selector: 'app-help-screen',
templateUrl: './app-help-screen.component.html',
styleUrls: ['./app-help-screen.component.css']
})
export class HelpScreenComponent implements OnInit {
items: FirebaseListObservable<any[]>;
constructor(db: AngularFireDatabase) {
this.items = db.list('help_text');
console.log(this.items);
}
ngOnInit() {
}
}
这可行,但不是很优雅,意味着每次添加带有新 属性 的 object 时都必须重写数据库代码。我最想做的是将所有字段输出为列表项,不包括名称、模型名称和网格放置值。查看 Angularfire2 文档:
https://github.com/angular/angularfire2/blob/master/docs/4-querying-lists.md
似乎没有办法通过键从查询中排除项目。肯定有一种方法可以使用 Firebase 和 Angularfire2?
执行这样的基本查询Firebase 不支持排除,如果您试图在查询中这样做的话。如果要排除字段,则需要创建单独的集合。
对于你的情况,对于我收集到的你想要完成的事情,有一个更简单的解决方案。您可以遍历视图中的所有 Object.keys(item)
并打印出键和值(只要键不是名称)。