首页 > 解决方案 > 如何将数组、OnClick 中的值重置为按钮?

问题描述

我正在使用 Tabulator 生成表格。单击表格单元格时,我将单元格值推送到数组中,数组中每个项目的初始值为“0”。我想实现一个重置按钮,它将在单击重置按钮或窗口中的任何位置时将分配的值重置为“0”。

组件.ts

 names = [{name: first, val: void 0},{name: second, val: void 0}]

 tabulatorColumnName = [{title: firstTitle, field: firstField, cellClick: 
                          this.getValue.bind(this)}
                        {title: secondTitle, field: secondField, 
                          cellClick:this.getValue.bind(this)}]

假设只有一行数据,下面的函数将 firstField 和 secondField 的数据推送到 names[0].val 和 names[1].val。

     getValue(e, row) {
          this.names[0].val = row.getData().firstField
          this.names[1].val = row.getData().secondField

     }

组件.html

我想实现一个功能或按钮,当用户单击窗口或按钮中的任何位置时,它将清除 [(ngmodel)] 值。

 <form (ngSubmit)="saveChild(sideToggleForm)" 
  #sideToggleForm="ngForm">
  <div *ngFor="let name of names">
    <div class="{{ name.type }}">
      <small>{{ name.label }}</small>
      <mat-form-field class="full-width" appearance="outline">
        <input
          name="{{ name.name }}"
          matInput
          [(ngModel)]="name.val"
        />
      </mat-form-field>
    </div>
  </div>
</form>

标签: javascriptangulartypescripttabulator

解决方案


在 HTML 中添加一个按钮,

<button (click)="resetNameValues()">Reset</button>

在TS中定义函数,

resetNameValues(){
    // Iterate over name array and set val to 0
    this.names.forEach(
        name => name.val=0
    )
}

推荐阅读