angularfire2 v5 * ngFor 항목 키

Question

나는 anglefire 5로 항목의 키를 가져 오려고 할 때 업그레이드 전에했던 것처럼 작동하지 않습니다.

HTML :

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

TS : 작업하는 데 사용 무엇

function1(itemkey, ...) 

및 항목의 키에 전달 될 것입니다.

이제는 동일한 동작을 생성하지 않습니다. itemkey의 값을 확인할 때 항상 호출 된 함수에서 비어 있습니다.

스냅 샷으로 만 키를 가져올 수 있습니까? 그렇다면 함수 내에서 키를 가져올 수 있도록 스냅 샷이나 함수와 비슷한 항목 자체를 어떻게 전달합니까?

감사합니다.

Answer 1

동일한 문제가있었습니다. 이 github page의 예를 따랐습니다.

그리고 구체적으로, 나는 다음과 같은 서비스와 구성 요소를 만들었다. 그들은 나를 위해 일합니다. 나는 비동기 파이프 (| async)를 사용해야하는 componenent 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!')); 
    } 
} 

구성 요소가 여기 LISTING (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 (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> 

도움이 되었기를 바랍니다.