Question

当我尝试使用angularfire 5获取项目的键时，它似乎不像升级前那样工作。

以前的工作：

HTML：

<div class="list" *ngFor="let item of items | async" 
(click)="function1( item.$key, ... )

TS：

 function1( itemkey, ... )

并且该项的密钥将被传递。

现在它不会产生相同的行为;当我检查itemkey的值时，它在被调用的函数中总是为空。

是否只能通过快照获取密钥？如果是这样，我如何将项目本身作为快照或类似功能传递给我，以便我可以在函数中获取密钥？

谢谢！

Answer 1

我遇到了同样的问题。我按照github page的例子进行了操作。

而且，具体而言，我创建了以下服务和组件。他们为我工作。我理解在componnent HTML中的* ngIf语句中我应该使用异步管道（| async），但它一直抛出一个错误，所以我会单独排序。现在，这个例子有效，它是我代码中的工作版本。

此处列出的服务（magnet.service.ts）：

import { Injectable } from '@angular/core';
import {
  AngularFireDatabase,
  AngularFireObject,
  AngularFireList
} from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { Magnet } from '../models/Magnet';
import { AuthService } from '../services/auth.service';
import * as firebase from 'firebase/app';

@Injectable()
export class MagnetService {
  magnetsRef: AngularFireList<Magnet>;
  magnets: Observable<any>;
  magnet: AngularFireObject<Magnet>;
  userID: string;

  constructor(public af: AngularFireDatabase, 
              private authService: AuthService) 
    { 

    }

  getMagnets(userID: string) {
      this.magnetsRef = this.af.list<Magnet>(userID + '/magnets');
      //use snapshotChanges().map() to store the key
      this.magnets = this.magnetsRef.snapshotChanges().map(changes => {
        return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
      });
    return this.magnets;
  }

  newMagnet(magnet: Magnet) {
    this.magnetsRef.push(magnet);
  }

  getMagnet(userID:string, key: string) {
    this.magnet = this.af.object(userID + '/magnets/' + key);
    console.log("Selected the following magnet: ");
    console.log(this.magnet);
    return this.magnet;
  }

  updateMagnet(key:string, magnet: Magnet) {
    this.magnetsRef.update(key, magnet).then(_ => console.log('update!'));
    return this.magnet;
  }

  deleteMagnet(key: string) {
    this.magnetsRef.remove(key).then(_ => console.log('item deleted!'));
  }
}

此处列出组件（magnet.component.ts）

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { MagnetService } from '../../services/magnet.service';
import { Magnet } from '../../models/Magnet';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';
import { AuthService } from '../../services/auth.service';
import { AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-magnets',
  templateUrl: './magnets.component.html',
  styleUrls: ['./magnets.component.scss']
})
export class MagnetsComponent implements OnInit {
  items: Observable<any>;
  //this works
  //items: Magnet[];
  user: firebase.User;

  constructor(
    public magnetService: MagnetService,
    private authService: AuthService
  ) {


  }

  ngOnInit() {
    this.authService.afAuth.authState.subscribe(user => {
      this.user = user;
      this.magnetService.getMagnets(user.uid).subscribe(items => {
        this.items = items;
      })
      })
  }


}

COMPONENT HTML HERE（magnets.component.ts）

<app-header></app-header>
<div class="container">
  <div class="row mt-5 pt-5">
    <div class="col text-center">
      <h1>Magnets</h1>
    </div>
  </div>
  <div id="" class="row">
    <div id="" class="col">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>ID</th>
            <th>HeadlineA</th>
            <th>HeadlineB</th>
            <th>SubheadLineA</th>
            <th>SubheadLineB</th>
            <th>LeadA</th>
            <th>LeadB</th>
            <th>Options</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of items">
            <td>{{ item.key }}</td>
            <td>{{ item.HeadlineA }}</td>
            <td>{{ item.HeadlineB }}</td>
            <td>{{ item.SubheadLineA }}</td>
            <td>{{ item.SubheadLineB }}</td>
            <td>{{ item.LeadA }}</td>
            <td>{{ item.LeadA }}</td>
            <td>{{ item.key }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<app-footer></app-footer>

我希望有所帮助！

angularfire2 v5 * ng对于itemkey

1 个答案: