热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用Angularfire2按键排除项目-ExcludeitemsbykeywithAngularfire2

IhaveaFirebasedatabasewiththisJSON:我有一个JSON为基础的数据库:help_text:[{Name:Bl

I have a Firebase database with this JSON:

我有一个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...

I am using Angular 4 to output the Name fields as headers and the individual items as list items:

我使用角4输出名称字段作为标题,单个项目作为列表项:

app.help-screen component.html

app.help-screen component.html

{{item.Name}}

  • Potion Quantity: {{ item["Potion Quantity"] }}
  • Price: {{ item.Price }}
  • Stackable: {{ item.Stackable }}
  • Quest Item: {{ item["Quest Item"] }}
  • Max Stack: {{ item["Max Stack"] }}

app-help-screen.component.ts

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;

  constructor(db: AngularFireDatabase) {
    this.items = db.list('help_text');
    console.log(this.items);
  }

  ngOnInit() {
  }

}

This works but it's not very elegant and means the database code will have to be rewritten every time an object with a new property is added. What I would ideally like to do is output all fields as a list item, excluding the name, the model name and the mesh placement value. Looking at the Angularfire2 docs:

这是可行的,但并不十分优雅,这意味着每次添加新属性的对象时都必须重写数据库代码。我理想的做法是输出所有字段作为列表项,不包括名称、模型名称和网格放置值。看看Angularfire2文档:

https://github.com/angular/angularfire2/blob/master/docs/4-querying-lists.md

https://github.com/angular/angularfire2/blob/master/docs/4-querying-lists.md

there doesn't seem to be a way to exclude items from a query by key. Surely there must be a way to perform such a basic query using Firebase and Angularfire2?

似乎没有一种方法可以通过键将项从查询中排除。肯定有办法使用Firebase和Angularfire2执行这样的基本查询吗?

1 个解决方案

#1


1  

Firebase does not support exclusions, if you're attempting to do that in a query. If you want to exclude fields you need to create separate collections.

如果您试图在查询中这样做,那么Firebase不支持排除。如果要排除字段,则需要创建单独的集合。

In your case there's a much simpler solution for what I'm gathering you want to accomplish. You could iterate over all of the Object.keys(item) in your view and print out the key and value (so long as the key isn't name).

在你的情况下,有一个更简单的解决方案,我正在收集你想要完成的事情。您可以遍历视图中的所有Object.keys(项),并输出键和值(只要键不是name)。


推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 本文介绍了计算机网络的定义和通信流程,包括客户端编译文件、二进制转换、三层路由设备等。同时,还介绍了计算机网络中常用的关键词,如MAC地址和IP地址。 ... [详细]
  • 先看看ElementUI里关于el-table的template数据结构:<template><el-table:datatableData><e ... [详细]
  • vue使用
    关键词: ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 前景:当UI一个查询条件为多项选择,或录入多个条件的时候,比如查询所有名称里面包含以下动态条件,需要模糊查询里面每一项时比如是这样一个数组条件:newstring[]{兴业银行, ... [详细]
  • ubuntu用sqoop将数据从hive导入mysql时,命令: ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • node.jsrequire和ES6导入导出的区别原 ... [详细]
author-avatar
壮丁1987_536
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有