小编Gur*_*yan的帖子

Angular&AngularFire 5从文档中检索数据

我在用什么

  • 角度5
  • AngularFire5
  • Firebase和Firestore

我正在努力实现的目标

我目前正在使用Google Firebase的新Firestore在学习角度的同时创建一个新应用。我的应用程序当前创建一个名为Links的集合,并创建一个具有自定义ID的新文档,该自定义ID在用户添加链接(即shorturl)时生成,该文档中包含4个字段:

  • uid
  • 网址
  • 短网址
  • 点击次数

我希望应用程序查询url字段中文档内的数据。

到目前为止我有什么

我已经创建了正确文档的路径:

  linkCollection: Observable<{}>;
  constructor(private afs: AngularFirestore, private router: Router) {
      this.path = this.router.url.replace('/','');
      afs.collection('Links').doc(this.path).valueChanges();
  }
Run Code Online (Sandbox Code Playgroud)

我被困在哪里

这可能是一个简单的解决方案,但我不确定如何获取url字段。我拥有的代码能够检索该文档,并且在另一部分中使用类似的方法来检索所有想法,并使用* ngFor显示数据,但不确定如何在ts文件而不是模板中进行操作。

firebase angularfire2 angular google-cloud-firestore angularfire5

3
推荐指数
1
解决办法
4365
查看次数

从数组中删除项目 - Angular 4

我正在Angular4中开发一个简单的待办事项应用程序.我通过以下方式设置应用程序:

表单组件:这是将项目添加到待办事项列表的表单
项目组件:这是单个组件.
应用程序组件:我有一个*ngFor看这里将列出所有待办事项.

我在项目组件上添加了一个新按钮,该按钮应该删除项目,但我无法弄清楚如何"找到"或"找到"项目的正确索引号以拼接或过滤掉它.
我在这里包含了一个github存储库的链接

app.component.html:

<app-navbar></app-navbar>
<div class="container">
  <app-form (itemAdded)="onItemAdded($event)"></app-form>
  <div class="row">
    <div class="col-md-3 mb-3"
    *ngFor="let item of toDoList; let i=index">
      <app-item
      [listItem]="item"
      (itemDeleted)="onItemDeleted($event)"></app-item>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  toDoList = [
    {
      name: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    }
  ];

  onItemAdded(itemData: {itemName: string}){
    this.toDoList.push({ …
Run Code Online (Sandbox Code Playgroud)

javascript arrays typescript angular

1
推荐指数
1
解决办法
4万
查看次数