Question

我对javascript和打字稿类型的东西很陌生。我正在开发一个离子应用程序，该应用程序从数据库中读取值列表。然后将它们存储在阵列中，并遍历每个元素，创建一个离子项目。对于每个项目，都会创建一个删除按钮。我想这样做，以便当用户单击删除按钮时，它将从数组中删除存储在离子项目中的值。一旦从数组中删除该值，我就可以更新数据库。

我最初尝试使用用于生成离子项目的可迭代值，但这没有任何意义，因为它已不在范围内。我对如何将按钮位于其中的元素的值传递给函数感到迷惑。

        <ion-list class = "list" *ngIf="isCommentToggle" >
          <ion-item id = "comments" *ngFor="let item of streamComments">
            {{item}}
            <button *ngIf="item" color="danger" ion-button (click)="onDeleteComment()" {{item}}="deleteComment">Delete</button>
          </ion-item>
        </ion-list>

具有功能的类型点文档

  onDeleteComment(){

    this.gaugeList.addCommentList(this.stream);
  }

我只是想一种方法来捕获存储在父元素中的变量，该元素从按钮被调用的位置Here is the application view

Answer 1

尝试以下过程：

<ion-list class = "list" *ngIf="isCommentToggle" >
    <ion-item id = "comments" *ngFor="let item of streamComments;let i=index">
        {{item}}
        <button *ngIf="item" color="danger" ion-button (click)="onDeleteComment(i)" {{item}}="deleteComment">Delete</button>
    </ion-item>
</ion-list>

请注意，我添加了let i=index，其中i是每个元素的索引。现在，您可以使用该i从数组中删除特定值，如下所示：

onDeleteComment(i:number){
    this.streamComments.splice(i,1);
}

它从索引号streamComments的{{1}}数组中删除一个值。

希望它将对您有帮助！

Answer 2

你好，同伴刚刚从数组中删除该项目，然后将其发送回数据库。

在您的Ts

     <ion-list class = "list" *ngIf="isCommentToggle" >
      <ion-item id = "comments" *ngFor="let item of streamComments">
        {{item}}
        <button *ngIf="item" color="danger" ion-button 
         (click)="onDeleteComment(item)" 
         {{item}}="deleteComment">Delete</button>
      </ion-item>
    </ion-list>

Answer 3

您可以将元素传递到onDeleteComment()函数中：

<button *ngIf="item" color="danger" ion-button (click)="onDeleteComment(item)"
    {{item}}="deleteComment">Delete</button>

然后在您的打字稿中

onDeleteComment(item) {
    // Do whatever you need to do with 'item'
    this.gaugeList.addCommentList(this.stream);
}

或者，您也可以在循环中使用*ngFor="let item of streamComments; let i = index"声明一个索引变量，并将其传递到onDeleteComment()中。然后：

onDeleteComment(index: number) {
    // The item that called this function is this.streamComments[index]
    this.gaugeList.addCommentList(this.stream);
}

如何获取存储在父元素中的值

3 个答案: