1

誰かがゴミ箱アイコンをクリックしたときに ionic 2 カードを削除する必要があります。これまでのコードをquerySelector is null実行すると、エラーが発生します。

ビュー html は次のようになります。

  <ion-card *ngFor="#mediaItem of mediaItems" id="item{{mediaItem.id}}" class="media-item">


    <ion-card-header class="title-header">
      <div class="title-item">
        {{mediaItem.title}}
      </div>
      <ion-icon name="trash" class="bookmark_trash_icon" (click)="removeItem(mediaItem.id)"></ion-icon>
    </ion-card-header>


    <ion-card-content class="outer-content" >
      
      <img src='{{mediaItem.url}}'>

    </ion-card-content>

    <ion-item class="bookmark-media-item">
      <!-- <button (click)="topup(mediaItem)" clear item-left> -->

      <div style="float:left;">
        <ion-icon name="heart"></ion-icon>
        {{mediaItem.liked}} &nbsp;
        <ion-icon name="close-circle"></ion-icon>
        {{mediaItem.disliked}} &nbsp;
      </div>
      <a (click)="showUserProfile(mediaItem.owner, mediaItem.username)" style="float:left;">
        {{mediaItem.username}}
      </a>
      <div style="float:right;">
        <img src="img/tiny-v.png" class="bookmark-v-icon">
        {{mediaItem.credits_left}}
      </div>

    </ion-item>
  
  </ion-card>

私のコントローラーのJavaScriptコードは次のようになります。

 removeItem(theItemID) {
    let cardToHide = '#item'+theItemID;
    document.querySelector(cardToHide).style.display = 'none';
  }

私が得るエラーは

querySelector is null
4

1 に答える 1

4

コードのその部分を変更することで、id の代わりにオブジェクトを送信できます。

(click)="removeItem(mediaItem)"

次に、配列内でそのオブジェクトを見つけてmediaItems、そこから削除します。その後、ビューが自動的に更新されます。

最初にindex配列内のそのオブジェクトの を取得し、次に を使用しmediaItems.splice(index, 1)て配列から削除できます。

removeItem(theItem) {
    let index = this.mediaItems.indexOf(theItem);
    this.mediaItems.splice(index,1);
}
于 2016-06-18T18:17:10.653 に答える