如果Firebase中存在项目，请更改离子图标

Question

我正在尝试使用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);
    }
  })  
}

在上面的代码中，当用户单击“星级概述”图标时，将其更改为“星级”，并在其中插入用户ID以及喜爱的产品的ID。

但是我现在尝试根据Firebase中存在的项目显示更改的离子图标，但未成功。

list.ts（从Firebase的“ favoritos”节点读取所有数据，并在存在该项目时尝试将离子图标更改为“ star”）

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