Изменить значок иона, если элемент существует в Firebase
Я пытаюсь разработать простую систему избранного для списка продуктов, используя Ionic 3 и Firebase. Процесс, который записывает избранное пользователя (и это исключает их также), работает отлично.
list.html
<ion-fab top right>
<button ion-fab (click)="addToFavorites(item, i)">
<ion-icon [name]="item.visible ? 'star' :'star-outline'">
</ion-icon>
</button>
</ion-fab>
list.ts (вставить и удалить избранное для данного пользователя)
addToFavorites(item, i:number){
item.visible = item.visible ? false : true;
var i = this.favorites.indexOf(item);
this.afAuth.authState.subscribe(user => {
if(user){
this.userId = user.uid;
if(i === -1){
this.db.object(`favoritos/${this.userId}/${item.id}`).set(item);
}else{
this.db.object(`favoritos/${this.userId}/${item.id}`).remove()
}
} else{
this.navCtrl.push(LoginPage);
}
})
}
В приведенном выше коде, когда пользователь нажимает на значок "звездообразный контур", он изменяется на "звездочку" и вставляет идентификатор пользователя, а под ним - идентификаторы избранных продуктов.
Но сейчас я безуспешно пытаюсь отобразить измененный значок иона в соответствии с существованием элемента в Firebase.
list.ts (чтение всех данных из узла "favitos" в Firebase и попытка изменить значок иона на "звезду", когда элемент существует)
constructor(public navCtrl: NavController, public navParams: NavParams, public listservice: ListService, public db: AngularFireDatabase, private afAuth: AngularFireAuth) {
this.afAuth.authState.subscribe(user => {
if(user){
this.userId = user.uid;
this.favMotos = this.db.list(`favoritos/${this.userId}`).valueChanges();
this.favMotos.subscribe(item => {
if(item){
item.visible = true;
}else{
item.visible = false;
}
})
}
})
}
Но когда я возвращаюсь на эту страницу, значок больше не "звездочка", а по умолчанию для не избранных (контур звездочки).
РЕДАКТИРОВАТЬ
Я пытался поменять собственность name
как двусторонняя привязка данных:
<ion-fab top right>
<button ion-fab (click)="addToFavorites(item, i)">
<ion-icon [(name)]="item.visible ? 'star' :'star-outline'">
</ion-icon>
</button>
</ion-fab>
Но он отображает следующую ошибку:
Parser Error: Unexpected token '=' at column 39 in [item.visible ? 'star' : 'star-outline'=$event] in ng:///AppModule/ListPage.html@35:26 ]
("p right>
<button ion-fab (click)="addToFavorites(item, i)">
<ion-icon [ERROR ->][(name)]="item.visible ? 'star' : 'star-outline'">
</ion-icon>
</button")