Question

当有人点击垃圾桶图标时，我需要移除离子2卡。到目前为止，我运行代码时出现C错误。

视图html如下所示：

＆＃13;

querySelector is null

＆＃13;

我的控制器javascript代码如下所示：

＆＃13;

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

＆＃13;

我得到的错误是

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

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

1 个答案: