Search code examples
javascriptangulardynamicangular6row

Angular-6 dynamic add and remove column not render proper data

In my project I have dynamic row add and remove column demo link here

enter image description here

The drop-down of key contains database and desktop. Based on the drop-down of key the value drop-down will be changed.

My issue: When I click 1st row it seems good. But when I move on to 2nd row the data append not properly

Eg:

  1. In 1st row I select Database,value should append ['mysql', 'oracle', 'mongo']
  2. In 2nd row I select desktop, value should append ['dell', 'lenovo', 'hp']

app.component.html

<div class="container" style="margin-top: 5%">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Action</th>
                <th>key</th>
                <th>value</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let dynamic of dynamicArray; let i = index;">
                <td (click)="deleteRow(i)">
                    <i class="fa fa-trash fa-2x"></i>
                </td>
                <td>
                    <select [(ngModel)]="dynamicArray[i].title1" class="form-control" #sel (change)="changed(sel.value)">
            <option [value]='1'>Database</option>
            <option [value]='2'>Desktop</option>
          </select>

          </td>
                <td>
                    <select [(ngModel)]="dynamicArray[i].title2" class="form-control">
            <option *ngFor="let data of dropdownData;">{{data}}</option>
          </select>
                </td>
            
            </tr>
            <tr>
                <td (click)="addRow(0)">
                    <i class="fa fa-plus fa-2x"></i>
                </td>
            </tr>
        </tbody>
    </table>
</div>

app.component.ts

import { Component, VERSION, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dynamicArray: Array<any> = [];
  newDynamic: any = {};
  dbValue= ['mysql', 'oracle', 'mongo'];
  desktopValue = ['dell', 'lenovo', 'hp'];
  dropdownData:any = [];
  ngOnInit(): void {
      this.newDynamic = {title1: "", title2: ""};
      this.dynamicArray.push(this.newDynamic);
  }
  addRow(index) {  
      this.newDynamic = {title1: "", title2: ""};
      this.dynamicArray.push(this.newDynamic);
      console.log(this.dynamicArray);
      return true;
  }
  
  deleteRow(index) {
      if(this.dynamicArray.length ==1) {
        return false;
      } else {
          this.dynamicArray.splice(index, 1);
          return true;
      }
  }

  changed(value) {
    if(value == 1){
      this.dropdownData = this.dbValue;
    }

    if(value == 2){
      this.dropdownData = this.desktopValue;
    }

  }
}

Please help me on this issue. Thanks in advance.

Solution

  • You need to add dropdownData to dynamicArray every time when you are adding a new row. Try this

    <div class="container" style="margin-top: 5%">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Action</th>
                <th>key</th>
                <th>value</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let dynamic of dynamicArray; let i = index;">
                <td (click)="deleteRow(i)">
                    <i class="fa fa-trash fa-2x"></i>
                </td>
                <td>
                    <select [(ngModel)]="dynamicArray[i].title1" class="form-control" #sel (change)="changed(sel.value, i)">
            <option [value]='1'>Database</option>
            <option [value]='2'>Desktop</option>
          </select>

                </td>
                <td>
                    <select [(ngModel)]="dynamicArray[i].title2" class="form-control">
            <option *ngFor="let data of dynamicArray[i].dropdownData;">{{data}}</option>
          </select>
                </td>

            </tr>
            <tr>
                <td (click)="addRow(0)">
                    <i class="fa fa-plus fa-2x"></i>
                </td>
            </tr>
        </tbody>
    </table>
</div>

    app.component.ts

    import { Component, VERSION, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dynamicArray: Array<any> = [];
  newDynamic: any = {};
  dbValue = ["mysql", "oracle", "mongo"];
  desktopValue = ["dell", "lenovo", "hp"];
  ngOnInit(): void {
    this.newDynamic = { title1: "", title2: "", dropdownData: [] };
    this.dynamicArray.push(this.newDynamic);
  }
  addRow(index) {
    this.newDynamic = { title1: "", title2: "", dropdownData: [] };
    this.dynamicArray.push(this.newDynamic);
    console.log(this.dynamicArray);
    return true;
  }

  deleteRow(index) {
    if (this.dynamicArray.length == 1) {
      return false;
    } else {
      this.dynamicArray.splice(index, 1);
      return true;
    }
  }

  changed(value, index) {
    let dropdownData;
    if (value == 1) {
      this.dynamicArray[index].dropdownData = this.dbValue;
    }

    if (value == 2) {
      this.dynamicArray[index].dropdownData = this.desktopValue;
    }
  }
}

    Stackblitz link : https://stackblitz.com/edit/angular-ivy-psdnpa?file=src/app/app.component.ts