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

Question

I have a table containing some rows.The table data comes from loop.Here I need to add new columns based on selection of checkbox.Suppose I checked product,a new table heading will create as product along with blank rows just below the table heading,again If I uncheck created columns will be removed.New columns should create before add button.Here is the code below 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

Check out my StackBlitz for live demo: https://stackblitz.com/edit/angular-table-focus-77xrnn

To add or remove columns dynamically, we have to first fetch the values from the component instead of hard coding them in the template.

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

Component:

And whenever a column checkbox is toggled, we listen to the change event and add or delete the column accordingly.

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];
    });
  }
}

Template:

In the template, columns and also table row items must be fetched dynamically.

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