如何将数组、OnClick 中的值重置为按钮？答案

【问题标题】：How to reset value from an array, OnClick to a button?如何将数组、OnClick 中的值重置为按钮？
【发布时间】：2019-09-26 14:39:17
【问题描述】：

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

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

     }

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

【问题讨论】：

我建议您创建数据的深层克隆，然后使用此克隆对象设置值。

标签： javascript angular typescript tabulator

【解决方案1】：

在您的 HTML 中添加一个按钮，

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

在TS中定义函数，

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

【讨论】：