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> 

我希望有幫助！