중포 기지

Question

내가 얻을 수 및 배열에 밀어 반복 처리가 잘 작동해야하지만 이미지를

중포 기지 데이터

https://i.stack.imgur.com/iVV6M.png

을 반복 할수 없어 할 때 다음 같은 응용 프로그램 데이터를 저장하고 중포 기지를 사용

미안

이것은 Ionic의 코드입니다.

this.database.list('/posts', { preserveSnapshot: true}) 
     .subscribe(snapshots => { 
      snapshots.forEach(snapshot => { 
      this.postArray.push(snapshot.val()) 
      }); 
     }) 

<ion-card *ngFor="let post of postArray" no-shadow> 

    <ion-slides> 
    <ion-slide *ngFor="let image of postArray.images"> 
     <p>{{image}}</p> 
    </ion-slide> 
    </ion-slides> 

    <ion-card-content> 
     <ion-card-title> {{post.title}} </ion-card-title> 
     <p> {{post.body}} </p> 
    </ion-card-content> 

감사

Answer 1

는 코드가 잘못처럼, 당신은 postArray 대신 post 반복하려는 같습니다.

또한

<ion-slides> 
    <ion-slide *ngFor="let image of post.images"> 
    <p>{{image}}</p> 
    </ion-slide> 
</ion-slides> 

<ion-card-content> 
    <ion-card-title> {{post.title}} </ion-card-title> 
    <p> {{post.body}} </p> 
</ion-card-content> 

당신이 async 파이프로 보일 것입니다

, 당신은 약간 코드를 최적화 할 수 - 가입에 대한 필요성을 제거합니다. 당신이 컨트롤러 내에서 .subscribe를 사용하는 경우

this.postArray = this.database.list('/posts', { preserveSnapshot: true}); 

<ion-card *ngFor="let post of postArray | async" no-shadow> 

    <ion-slides> 
    <ion-slide *ngFor="let image of post.images"> 
     <p>{{image}}</p> 
    </ion-slide> 
    </ion-slides> 

    <ion-card-content> 
    <ion-card-title> {{post.title}} </ion-card-title> 
    <p> {{post.body}} </p> 
    </ion-card-content> 

</ion-card> 

마지막으로, 당신은 ngOnDestroy에서 탈퇴해야하거나 데이터 처리를 완료 한 후에 잊지 마세요. 구독 취소를 원하지 않고 스냅 샷을 보존하려는 경우 .first 메소드를 살펴볼 수 있습니다.

// Using .subscribe - Need to unsubscribe 
this.posts$ = this.database.list('/posts', { preserveSnapshot: true }) 
    .subscribe 

// ... 

ngOnDestroy() { 
    setTimeout(() => { 
    this.posts$.unsubscribe(); 
    }); 
} 

// Using .first - No need to unsubscribe 
this.database.list('/posts', { preserveSnapshot: true}) 
    .first() 
    .subscribe(snapshots => {