angularfire2 v5 * ngFor项目密钥

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的例子。

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

服务清单这里（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!')); 
    } 
} 

分量列表HERE（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> 

我希望有帮助！