基于选择输入框和选择下拉列表的 Angular-6 未正确显示

如何解决基于选择输入框和选择下拉列表的 Angular-6 未正确显示

这个问题可能会被问到，但这并不能解决我的问题。

key 的 drop-down 包含 database、desktop 和 account。根据键的下拉列表，值 drop-down 和 inputBox 将发生变化。

https://stackblitz.com/edit/angular-ivy-zahevb?file=src%2Fapp%2Fapp.component.html

我的问题：当我点击第一行时，它看起来不错。但是当我移动到第二行时，数据附加不正确。当我选择 account previuos 行下拉也更改为 inputBox

例如：

在第一行我选择数据库，值应该在 drop-down 中附加 ['MysqL','oracle','mongo']
在第 2 行我选择桌面，值应附加 ['dell','lenovo','hp']
在第 3 行，我选择“帐户”，inputBox 将显示

app.component.ts

import { Component,VERSION } 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 = [{'id':'1','name':'dell'},{'id':'2','name':'lenovo'},{'id':'3','name':'hp'}];
  isdbShow:boolean = false;
  isdesktopShow:boolean = false;
  isaccountShow:boolean = false;
  ngOnInit(): void {
    this.newDynamic = { title1: "",title2: "",dropdownDataDb: [],dropdownDataDesktop: [] };
    this.dynamicArray.push(this.newDynamic);
  }
  addRow(index) {
    this.newDynamic = { title1: "",dropdownDataDesktop: [] };
    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 dropdownDataDb;
    let dropdownDataDesktop;
    if (value == 1) {
      this.isdbShow = true;
      this.isdesktopShow = false;
      this.isaccountShow = false;
      this.dynamicArray[index].dropdownDataDb = this.dbValue;
    }

    if (value == 2) {
      this.isdbShow = false;
      this.isdesktopShow = true;
      this.isaccountShow = false;
      this.dynamicArray[index].dropdownDataDesktop = this.desktopValue;
    }

    if (value == 3) {
      this.isdbShow = false;
      this.isdesktopShow = false;
      this.isaccountShow = true;
    }
  }
}

app.componet.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,i)">
            <option [value]='1'>Database</option>
            <option [value]='2'>Desktop</option>
            <option [value]='3'>Account</option>
          </select>

                </td>
                <td>
                    <!-- show db data -->
                    <select *ngIf="isdbShow" [(ngModel)]="dynamicArray[i].title2" class="form-control">
            <option *ngFor="let data of dynamicArray[i].dropdownDataDb;">{{data}}</option>
          </select>
                    <!-- show desktop data -->
                    <select *ngIf="isdesktopShow" [(ngModel)]="dynamicArray[i].title2" class="form-control">
            <option *ngFor="let data of dynamicArray[i].dropdownDataDesktop;">{{data?.name ? data?.name : data}}</option>
          </select>

          <!-- show account data -->
          <input *ngIf="isaccountShow" type="text" [(ngModel)]="dynamicArray[i].title2" class="form-control">
                </td>

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

解决方法

ts code

dynamicArray: Array<any> = [];
  newDynamic: any = {};
  dbValue = ["mysql","oracle","mongo"];
  desktopValue = [
    { id: "1",name: "dell" },{ id: "2",name: "lenovo" },{ id: "3",name: "hp" }
  ];
  ngOnInit(): void {
    this.newDynamic = {
      title1: "",title2: "",dropdownDataDb: [],dropdownDataDesktop: [],isDropDown: true
    };
    this.dynamicArray.push(this.newDynamic);
  }
  addRow(index) {
    this.newDynamic = {
      title1: "",isDropDown: true,isText: false
    };
    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: any,index: any) {
    console.log(this.dynamicArray[index].title1);
    if (value == 1) {
      this.dynamicArray[index].isDropDown = true;
      this.dynamicArray[index].isText = false;
      this.dynamicArray[index].dropdownDataDb = this.dbValue;
    }

    if (value == 2) {
      this.dynamicArray[index].isDropDown = true;
      this.dynamicArray[index].isText = false;
      this.dynamicArray[index].dropdownDataDesktop = this.desktopValue;
    }

    if (value == 3) {
      this.dynamicArray[index].isDropDown = false;
      this.dynamicArray[index].isText = true;
    }
  }

<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>
            <option [value]='3'>Account</option>
          </select>
                </td>
                <td>
                    <!-- show db data -->
                    <select *ngIf="dynamicArray[i].title1 == 1 && dynamic?.isDropDown" [(ngModel)]="dynamicArray[i].title2" class="form-control">
            <option *ngFor="let data of dynamicArray[i].dropdownDataDb;">{{data}}</option>
          </select>
                    <!-- show desktop data -->
                    <select *ngIf="dynamicArray[i].title1 == 2 && dynamic?.isDropDown" [(ngModel)]="dynamicArray[i].title2" class="form-control">
            <option *ngFor="let data of dynamicArray[i].dropdownDataDesktop;">{{data?.name ? data?.name : data}}</option>
          </select>

                    <!-- show account data -->
                    <input *ngIf="dynamicArray[i].title1 == 3 && dynamic?.isText" type="text" [(ngModel)]="dynamicArray[i].title2" class="form-control">
                </td>

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