1

angularfire2 を使用して firebase からデータを取得することについて質問があります。私のデータベースアーキテクチャは次のようになります:

{
    "productsfavorites" : {
    "-KNnfAs31LkMUjU60VAG" : true
  },
  "short_desc" : {
    "-KNnfAs31LkMUjU60VAG" : {
      "city" : "Frontignan Plage",
      "desc" : "Superbe maison les pieds dans l'eau",
      "favorite" : true,
      "orientation" : "portrait",
      "price" : 335000,
      "ratio" : 2161,
      "ratiok" : 22,
      "size" : 155,
      "src" : "http://decor.friesiannews.com/wp-content/uploads/2014/08/Modern-Beach-Themed-Bedrooms.jpg",
      "type" : "Maison"
    },
    "-KNngYcNoUUql4oIMxwU" : {
      "city" : "Frontignan",
      "desc" : "A nice home in Frontignan",
      "orientation" : "portrait",
      "price" : 255000,
      "ratio" : 2125,
      "ratiok" : 21,
      "size" : 120,
      "src" : "http://homeimprov.etienneathens.com/wp-content/uploads/2014/08/The-Beach-Ornament.jpg",
      "type" : "Maison"
    },
  }
}

私のtsファイルには次のものがあります：

import {Page, Content} from 'ionic-angular';
import {AngularFire, FirebaseListObservable} from "angularfire2";
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
@Page({
    templateUrl: "build/pages/page1/page1.html",
})
export class Page1 {
products: Observable<any[]>;//contains the ref for the goods in a given city 
constructor(private af: AngularFire) {
this.getShortDescFav();
}

//To list the favorites products I use this function:
getShortDescFav() {
    this.products = this.af.database.list('/productsfavorites/')
        .map((items) => {
            return items.map(item => {
            item.short_desc = this.af.database.object('/short_desc/' + item.$key)
                return item;
            });
        });
}

}

次に、htmlファイルでこれを行います

<ion-card *ngFor="let item of products | async">
      <img src="{{(item.short_desc | async)?.src}}" class="lazy" alt="Image" id="{{item.$key}}" (load)="imageLoaded(item.$key)">
  <ion-card-content>
    <ion-card-title>
      <ion-row>
      <ion-col width-67 no-padding>
    {{(item.short_desc | async)?.city}}
  </ion-col>
  <ion-col width-33 text-right no-padding>
    <span primary>
{{(item.short_desc | async)?.price}}€
</span>
</ion-col>
</ion-row>
      </ion-card-title>
      <ion-row>
        <ion-col width-33 no-padding>
          {{(item.short_desc | async)?.type}}
        </ion-col>
        <ion-col width-33 no-padding text-center>
          {{(item.short_desc | async)?.size}}m2
        </ion-col>
        <ion-col width-33 no-padding text-right>
          {{(item.short_desc | async)?.ratiok}}K€/m2
        </ion-col>
      </ion-row>
    <p>
      {{(item.short_desc | async)?.desc}}
    </p>
  <ion-row>
    <ion-col width-25 text-center>
      <ion-icon name="md-eye"center></ion-icon>
    </ion-col>
    <ion-col width-25 text-center>
      <ion-icon name="md-share"></ion-icon>
    </ion-col>
    <ion-col width-25 text-center>
      <ion-icon name="md-create"></ion-icon>
    </ion-col>
    <ion-col width-25 text-center>
      <ion-icon *ngIf="(item.short_desc | async)?.favorite != true" name="md-star" (click)="favorite(item.$key)" class="regular-product"></ion-icon>
      <ion-icon *ngIf="(item.short_desc | async)?.favorite == true" name="md-star" (click)="regular(item.$key)" class="favorite-product"></ion-icon>
    </ion-col>
  </ion-row>
  </ion-card-content>
</ion-card>

お気に入りとして商品マークが表示されますが、新しい商品がお気に入りになるとすぐに、リストが再レンダリングされます。リストが再レンダリングされるのを防ぎ、新製品のカードのみをお気に入りとして追加するにはどうすればよいですか?

誰かがこれで私を助けてくれることを願っています。

アレックス。

4

1 に答える 1

3

代わりにこれ

item.short_desc = this.af.database.object('/short_desc/' + item.$key)
            return item;
        });

これを行う。

return this.af.database.object('/short_desc/' + item.$key);

また、htmlでは item.short_desc 代わりに item を取得します

于 2016-08-12T14:15:56.827 に答える