Ionic4滑动项问题

Question

I am building a chat messaging app with Ionic4. The expected behavior is to have a sliding item with the picture and name of a friend and upon sliding left, add and remove friend buttons are revealed to add or remove a friend from the chat. Further, if a friend is added to the chat the add button is disabled and the remove button is enabled using the [disabled] tag. Finally if any friends exist that have been added, a button on the bottom appears, to take us to the chat page and initialize a conversation.

The problem is that I initially swipe left on the bottom most friend, and then we see the add and remove buttons with add disabled, So far so good. I then click add and the remove button becomes undisabled, and the add button becomes disabled. I then click remove and it works great!

I then try the same thing on the friend above the bottom and everything fails. The buttons do not enable/disable, but when the remove button still appears disabled.

So far I have tested the custom pipe(s) I created and they have all shown true when a friend appears within chatfriends, so that condition is ok. 

//chats.html


<ion-list-header>
    Friends
  </ion-list-header>
  <ion-list>

    <ion-item-sliding #slidingitem *ngFor="let key of myfriends" >

          <ion-item >
            <ion-avatar item-left>
              <img src="{{key.photoURL}}">
            </ion-avatar>
            <h2>{{key.displayName}}</h2>
          </ion-item>
        <ion-item-options slide="left">


          <button ion-button [disabled]="(chatfriends | contains:key)" color="primary" (click)="addfriendtochat(key)" >

            Add
          </button>




          <button ion-button [disabled]="!(chatfriends | contains:key)" color="danger" (click)="removefriendfromchat(key,slidingitem)" >

              Remove
          </button>


        </ion-item-options>

    </ion-item-sliding>
    </ion-list>


//**************************
//chats.ts 

ionViewWillEnter() {


    //chats.ts has to listen to chatconnect node as it does with the nodes below
    this.requestservice.getmyrequests();
    this.requestservice.getmyfriends();
    this.requestservice.getmychatconnects();


    //this.contains.transform(localfriends, "Eddie");


  //  this.myfriends = [];
    this.events.subscribe('gotrequests', () => {
      this.myrequests = [];
      this.myrequests = this.requestservice.userdetails;
    });
    this.events.subscribe('friends', () => {
      this.myfriends = [];
      this.myfriends = this.requestservice.myfriends; 
    });
    this.events.subscribe('gotchatconnects', () => {
      this.mychatconnects = [];
      this.mychatconnects = this.requestservice.chatconnects;
    });

  }

  ionViewDidLeave() {
    this.events.unsubscribe('gotrequests');
    this.events.unsubscribe('friends');
    this.events.unsubscribe('gotchatconnects');
  }

//此函数将好友添加到聊天中，并将好友添加到聊天朋友数组中，同时设置是否显示开始聊天按钮addfriendtochat( friend ){

    if(this.myfriends.includes(friend)){

        this.chatservice.addfriendtochat(friend);

        if(this.chatservice.getfriendcount() > 0){
          this.friendsinarray = true;
        }else{
          this.friendsinarray = false;
        }


    }


    this.chatfriends = this.chatservice.getfriends();


  }

//此函数从聊天中移除好友，并从聊天好友数组中移除好友，同时设置是否显示开始聊天按钮的标志

removefriendfromchat(friend, slidingitem: ItemSliding){


    if(this.myfriends.includes(friend)){

        this.chatservice.removefriendfromchat(friend);

        if(this.chatservice.getfriendcount() > 0){
          this.friendsinarray = true;
        }else{
          this.friendsinarray = false;
        }


    }



    this.chatfriends = this.chatservice.getfriends();

    slidingitem.close();

  }


There is no error message, the one notable thing is that upon the steps above when it fails, the items are not reloaded.

Answer 1

I wasn't able to get the exact sliding action I wanted, but the problem was really in the rendering of buttons. After removing the slider the buttons did not hide and unhide or [enable/disable] the add and remove from chat buttons, exactly as previously described. As I posted before, the page did not seem to re-render after objects were updated in the providers. I believe that the problem was just that, subscribing to events from two providers. I switched the tracking of added friends to my requests.ts. This was for two reasons.

1. I pulled my list of friends, called myfriends, from my firebase rest api using that provider, so my object to track whether one of my friends friends was added to the chat, called friendobjs, were there as well. Further I had to use events from both objects to fill in info on my chats.ts page.
2. Everything else on my page that was subscribing to events from that provider so I didn' think conflicts would arise.

Here is the working code, which hides and unhides the add and remove buttons for each friend displayed.


//chats.ts

ionViewWillEnter() {


    //chats.ts has to listen to chatconnect node as it does with the nodes below

    this.requestservice.getmyfriends();



    this.events.subscribe('friends', () => {
      this.myfriends = [];
      this.friendobjs = [];
      this.myfriends = this.requestservice.myfriends; 
      this.friendobjs = this.requestservice.friendobjs;
      this.singleArray = [];
      for (var _i = 0; _i < this.myfriends.length; _i++) {
        this.singleArray.push({
          myfriends: this.myfriends[_i],
          friendobjs: this.friendobjs[_i] 
        });
      }
    });


    this.events.subscribe('addedfriendtochat', () => {
      this.friendobjs = [];
      this.friendobjs = this.requestservice.friendobjs;
      this.singleArray = [];
      for (var _i = 0; _i < this.myfriends.length; _i++) {
        this.singleArray.push({
          myfriends: this.myfriends[_i],
          friendobjs: this.friendobjs[_i] 
        });
      }
    });

    this.events.subscribe('removedfriendfromchat', () => {
      this.friendobjs = [];
      this.friendobjs = this.requestservice.friendobjs;
      this.singleArray = [];
      for (var _i = 0; _i < this.myfriends.length; _i++) {
        this.singleArray.push({
          myfriends: this.myfriends[_i],
          friendobjs: this.friendobjs[_i] 
        });
      }

  }


removefriendfromchat(friendobj){



    if(!friendobj.canbeadded){


        this.requestservice.removefriendfromchat(friendobj);



        if(!this.requestservice.canchat){
          this.friendsinarray = true;
        }else{
          this.friendsinarray = false;
        }



    }

addfriendtochat(friendobj){

    if(friendobj.canbeadded){

      this.requestservice.addfriendtochat(friendobj);


        if(!this.requestservice.canchat){
          this.friendsinarray = true;
        }else{
          this.friendsinarray = false;
        }

    }


  }

//chats.html

<ion-item *ngFor="let single of singleArray" >


        <ion-avatar item-left>
            <img src="{{single.myfriends.photoURL}}">
          </ion-avatar>
          <h2>{{single.myfriends.displayName}}</h2>
          <h2>{{single.friendobjs.canbeadded}}</h2>

          <button ion-button round item-right color="primary" [hidden]="!single.friendobjs.canbeadded"  (click)="addfriendtochat(single.friendobjs)" >
          <ion-icon name="checkmark"></ion-icon>
              Add
          </button>

            <button ion-button round item-right color="danger" [hidden]="single.friendobjs.canbeadded" (click)="removefriendfromchat(single.friendobjs)" >
            <ion-icon name="trash"></ion-icon>
              Remove
            </button>

          </ion-item>