javascript - 如何在用户输入时在表中动态添加行(postman-style-reactive-table)

Question

如何在标题选项卡中输入至少一个字符(如 Postman 的行为)时动态添加一行。

1) 当用户在第一行的 td 中输入任何单个字符，然后再输入一行 应该在下面添加。当用户从第一行删除文本时以及当第一行的 td 为空，然后删除下面的行。

2) 跟踪模型中每一行输入的文本(即键和 值)；

3) 当用户在任何 td 中的一行中输入任何单个字符时，然后选择复选框 应该检查，否则不会。

.ts

    model =  new Model ('','','',..............);
    tableRow = {
    "key":[{
    'name':'key1',
    'keyInput':""
    }],
    "value":[{
    'name':'value1',
    'keyInput':""
    }]
    }

addRow(event){
    if(event.target.length < 2){
     let data = {
           'name':'key' + (this.tableRow.key.length + 1),
           'keyInput':""
           }
         this.tableRow.key.push(data )
       }else{
        this.tableRow.key.pop();
         }
       }

.html

<div class="col-12 table-responsive">
<table class="table">
<thead>
<th>
<td></td>
<td>Key</td>
<td>Value</td>
</th>
</thead>
<tbody>
<tr *ngFor="let row of tableRow.key; let i = index;">
<td><input type="checkbox"></td>
<td><input (keyup)="addRow($event)" [(ngModel)]="model.key" type="text"></td>
<td><input [(ngModel)]="model.value" type="text"></td>
</tr>
</tbody>
</table>
</div>

Answer 1

这是您可能想要的一个非常基本的实现。

组件:

export class AppComponent {
  title = 'stack-solve';
  //defining row of objects and initializing first row with empty values
  //All values entered on the screen are bound to this array
  rows: any[] = [{
    checked:false,
    key:'',
    value:''
  }];

//This function is called on keyup and checks the checkbox on that row and adds new row if the action was on the last row  
checkAndAddRow(i){
    this.rows[i].checked = true;
    if(this.rows.length - 1 == i){//insert new empty row, incase this keyup event was on the last row, you might want to enhance this logic... 
      this.rows.push({
        checked:false,
        key:'',
        value:''
      })
    }

  }
}

模板:

  <div class="col-12 table-responsive">
    <table class="table">
      <thead>
        <td></td>
        <td>Key</td>
        <td>Value</td>
      </thead>
      <tbody>
        <tr *ngFor="let row of rows; let i = index">
          <td><input [checked]="row.checked" type="checkbox"></td>
          <td><input [(ngModel)]="row.key" type="text" name="key" (keyup)="checkAndAddRow(i)"></td>
          <td><input [(ngModel)]="row.value" type="text" name="value" (keyup)="checkAndAddRow(i)"></td>
        </tr>
      </tbody>
    </table>
  </div>

应用程序模块:

imports: [
    BrowserModule,
    FormsModule // need to import FormsModule if you don't have already
  ],