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

时间:2019-04-06 04:33:31

标签: javascript html angular ionic-framework

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

3 个答案:

答案 0 :(得分:0)

尝试以下过程:

<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}}数组中删除一个值。

希望它将对您有帮助!

答案 1 :(得分:0)

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

i

在您的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>

答案 2 :(得分:0)

您可以将元素传递到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);
}