在控制器中使用 Javascript 删除离子 2 离子卡 div

Question

当有人点击垃圾桶图标时，我需要删除 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

Answer 1

您可以通过更改那部分代码来发送对象而不是 id：

(click)="removeItem(mediaItem)"

然后在 mediaItems 数组中找到该对象并从那里删除它。然后您的视图将自动更新。

首先获取数组中那个对象的index，然后可以使用mediaItems.splice(index, 1)从数组中删除它：

removeItem(theItem) {
    let index = this.mediaItems.indexOf(theItem);
    this.mediaItems.splice(index,1);
}

在控制器中使用 Javascript 删除离子 2 离子卡 div

Remove ionic 2 ion-card div using Javascript in controller

javascript

angular

ionic2

ionic3