angularfire2 und ionic2. Mapping-Daten rendern die gesamte Liste neu, wenn ein Objekt hinzugefügt oder entfernt wird

Question

Ich habe eine Frage über Daten von Firebase mit angularfire2 erhalten. Meine db Architektur sieht wie folgt aus:

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

In meiner TS-Datei Ich habe diese:

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; 
      }); 
     }); 
} 

} 

dann in der HTML-Datei kann ich dieses

<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> 

Das Produkt Marke als Favorit wird angezeigt, aber sobald ein neues Produkt zu einem Favoriten wird, wird die Liste neu gerendert. Wie verhindert man, dass die Liste neu gerendert wird und nur eine Karte für das neue Produkt als Favorit hinzufügen?

Hoffe jemand kann mir dabei helfen.

Alex.

Answer 1

statt diese

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

dies tun.

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

auch in HTML finden Sie Artikel erhalten statt item.short_desc