angularfire2 和 ionic2。添加或删除 object 时映射数据 re-render 整个列表

Question

我有一个关于使用 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>

显示收藏的产品标记，但一旦新产品成为收藏，列表就会显示 re-rendered。如何防止列表被 re-rendered 并且只为新产品添加卡片添加为收藏？

希望有人能帮我解决这个问题。

亚历克斯

Answer 1

而不是这个

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

angularfire2 和 ionic2。添加或删除 object 时映射数据 re-render 整个列表

angularfire2 and ionic2. Mapping data re-render the whole list when adding or removing an object

angularfire

firebase-realtime-database

ionic2

angularfire2

angular