anglefire2およびionic2。オブジェクトを追加または削除するときにデータをマッピングするとリスト全体が再レンダリングされます

Question

firefbase2からのデータ取得に関する質問があります。 私のDBのアーキテクチャは次のようになります。私のTSファイルで

{ 
    "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" 
    }, 
    } 
} 

私はこれを持っている：

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> 

お気に入りとして、製品のマークを行います新しい商品がお気に入りになるとすぐに、リストが再レンダリングされます。 リストの再レンダリングを防止し、新製品のカードのみを追加する方法をお気に入りに追加しますか？

誰かがこれを手伝ってくれることを願っています。

アレックス。

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にあなたは私の時間を保存し