Angular-6 动态添加和删除列未呈现正确的数据

Question

在我的项目中，我有动态行添加和删除列demo link here

key的drop-down包含database和desktop。根据键的 drop-down 值下拉将更改。

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

例如：

在第一行 I select Database，值应附加 ['mysql', 'oracle', 'mongo']
第 2 行 I select desktop，值应附加 ['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;
    }

  }
}

请帮我解决这个问题。提前致谢。

Answer 1

每次添加新行时，都需要将dropdownData 添加到dynamicArray。 试试这个

<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

Angular-6 动态添加和删除列未呈现正确的数据

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

javascript

row

dynamic

angular

angular6