Question

我想要这些..！

当我单击提交按钮时，将获得以下数据类型： {

“名称”：“ bhavesh”， “ sttus”：“是非” }

如果选中该复选框，则对象状态为true，否则为false。

object：

tabledsta = [ { “ id”：“ 1”， “ name”：“ bhavesh”， “ number”：“ 9104198297” }， { “ id”：“ 2”， “ name”：“ mihir”， “数字”：“ 9154178297” } ];

<table class="table">
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>number</th>
          <th>select</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of tabledsta">
          <td>{{data.id}}</td>
          <td >{{data.name}}</td>
          <td>{{data.number}}</td>
          <td>            
            <input type="checkbox" class="form-check-input" (change)="handleSelected($event, data.name)"> Select
          </td>
        </tr>        
      </tbody>
    </table>
    <button type="button" class="btn btn-primary" (click)="submitBtn()">Submit</button>

Answer 1

实现此目标的一种方法是使用resultsArray（来自name数组）和sttus（初始化为false）创建并初始化tabledsta，因为所有复选框都将标出）;然后，在复选框状态每次更改时，您都将更新resultsArray ...，其格式是您要查找的格式，并且也显示在屏幕上以供参考。

相关的 HTML ：

<table class="table">
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>number</th>
                <th>select</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of tabledsta">
                <td>{{data.id}}</td>
                <td>{{data.name}}</td>
                <td>{{data.number}}</td>
                <td>
                    <input type="checkbox" class="form-check-input" (change)="handleSelected($event, data.name)"> Select
          </td>
        </tr>        
      </tbody>
    </table>
    <button type="button" class="btn btn-primary" (click)="submitBtn()">Submit</button>

    <hr/> 
    <b>result: </b> <br/>
    {{ resultsArray | json }}

相关的 TS ：

export class AppComponent {
  name = 'Angular';
  tabledsta = [{ "id": "1", "name": "bhavesh", "number": "9104198297" }, { "id": "2", "name": "mihir", "number": "9154178297" }];
  resultsArray: any[] = [];

  ngOnInit() {
    for (var i = 0; i < this.tabledsta.length; i++) {
      this.resultsArray.push({ name: this.tabledsta[i].name, sttus: false })
    }
  }

  handleSelected(event, dataName) {
    for (var i = 0; i < this.resultsArray.length; i++) {
      if (dataName == this.resultsArray[i].name) { this.resultsArray[i].sttus = event.currentTarget.checked };
    }
  }
  submitBtn() {
    //do submit stuff
  }

}

完成working stackblitz here

如何获取所有表记录的状态，而无需在json数据中添加状态字段？

1 个答案: