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

Question

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

app.component.html

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

app.component.ts

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，我们必须首先从组件中获取值，而不是在模板中硬编码它们。

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>