Изменить значок иона, если элемент существует в Firebase - PullRequest
Новая
       13

Изменить значок иона, если элемент существует в Firebase

0 голосов
/ 23 января 2019

Я пытаюсь разработать простую систему избранного для списка продуктов, используя 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);
    }
  })  
}

В приведенном выше коде, когда пользователь нажимает на значок «звездообразный контур», он заменяется на «звездочку» и вставляет идентификатор пользователя, а под ним - идентификаторы избранных продуктов.

enter image description here

Но я сейчас пытаюсь отобразить измененный значок иона в соответствии с существованием предмета в 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")
...