如何根据angular 7中的复选框选择向表中添加新列

Question

我有一个包含一些行的表。表数据来自循环。在这里，我需要根据复选框的选择添加新列。假设我选中了产品，一个新的表标题将创建为产品，以及表标题下方的空白行，再次，如果我取消选中，创建的列将被删除。新列应该在添加按钮之前创建。下面是代码https://stackblitz.com/edit/angular-table-focus

    <div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> 
<div><button (click)="enable()">Edit</button> <input type="checkbox" value="product">Product&nbsp;<input type="checkbox" value="market">market</div>  
  <table class="table border">
    <thead>
    <tr>
    <th>Items</th>
    <th>Business</th>
    <th></th>
    </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of groups;let i = index" (click)="setClickedRow(i)"  [class.active]="i == selectedRow">
       <td> <input #focus [disabled]='toggleButton' type="text" value="{{row.name}}"> </td>
       <td> <input [disabled]='toggleButton' type="text" value="{{row.items}}"> </td>
       <td> <button (click)="addRow(i)">Add</button></td>
      </tr>
    </tbody>
  </table>
</div>

import { Component,ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
selectedRow : Number;

@ViewChild('focus') input: ElementRef;
      public toggleButton: boolean = true;
  ngOnInit() {

  }
  groups=[
     {
       "name": "pencils",
       "items": "red pencil"
     },
     {
       "name": "rubbers",
       "items": "big rubber"
     },
     {
       "name": "rubbers1",
       "items": "big rubber1"
     },
  ];
  addRow(index): void {
    var currentElement = this.groups[index];
    this.groups.splice(index, 0, currentElement);
 }
 enable(){
    this.toggleButton = false
    setTimeout(()=>{ // this will make the execution after the above boolean has changed
    this.input.nativeElement.focus();
    this.selectedRow = 0;
  },0); 
    }
  setClickedRow(index) {
    this.selectedRow = index;
  }
}

Answer 1

查看我的StackBlitz现场演示：https://stackblitz.com/edit/angular-table-focus-77xrnn

要动态添加或删除列，我们必须首先从组件中获取值，而不是在模板中对其进行硬编码。

columns = ["Items", "Business"];

组成部分：

每当切换列复选框时，我们都会监听Change事件，并相应地添加或删除该列。

onColumnStatusChange(column, isChecked) {
  if (isChecked) {
    // Add column to the table.

    this.columns.push(column);

    this.groups.forEach(value => {
      value[column] = "";
    });
  } else {
    // Delete column from the table.

    this.columns.splice(this.columns.indexOf(column), 1);

    this.groups.forEach(value => {
      delete value[column];
    });
  }
}

模板：

在模板中，必须动态读取列和表行项。

<input type="checkbox" value="product" (change)="onColumnStatusChange($event.target.value, $event.target.checked)">Product&nbsp;
<input type="checkbox" value="market" (change)="onColumnStatusChange($event.target.value, $event.target.checked)">market
  ...
  ...
<tr>
  <ng-container *ngFor="let column of columns; let i = index">
     <th>{{ column }}</th>
  </ng-container>
</tr>
  ...
  ...
<tr *ngFor="let row of groups;let i = index" (click)="setClickedRow(i)"  [class.active]="i == selectedRow">
   <ng-container *ngFor="let item of objectKeys(row); let j = index">
      <td><input #focus [disabled]='toggleButton' type="text" value="{{row[item]}}"></td>
   </ng-container> 
   <td><button (click)="addRow(i)">Add</button></td>
</tr>