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

也许有人会问这个问题，但这并不能解决我的问题

键的

下拉列表包含
数据库
、
桌面
和
帐户
。根据键的下拉列表，将更改值
下拉列表
和
输入框


我的问题：当我点击第一行时，它看起来很好。
但当我移到第二行时，数据附加不正确。当我选择
account
previous行下拉列表时，也会更改为
inputbox

例如：

在第一行我选择数据库，值应该在
下拉列表中追加['mysql'，'oracle'，'mongo']

在第二行我选择桌面，值应该附加['dell'、'lenovo'、'hp']
在第三行中，我选择帐户，
输入框将显示

应用程序组件.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: "", title2: "", dropdownDataDb: [], 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;
    }
  }
}

从'@angular/core'导入{Component，VERSION}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
dynamicArray:Array=[]；
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:布尔值=false；
ngOnInit（）：void{
this.newDynamic={title1:，title2:，dropdownDataDb:[]，dropdownDataDesktop:[]}；
this.dynamiccarray.push（this.newDynamic）；
}
addRow（索引）{
this.newDynamic={title1:，title2:，dropdownDataDb:[]，dropdownDataDesktop:[]}；
this.dynamiccarray.push（this.newDynamic）；
console.log（this.dynamicArray）；
返回true；
}
删除行（索引）{
if（this.dynamicArray.length==1）{
返回false；
}否则{
这个.dynamicArray.拼接（索引1）；
返回true；
}
}
更改（值、索引）{
让dropdownDataDb；
让dropdownDataDesktop；
如果（值==1）{
this.isdbShow=true；
this.isdesktopShow=false；
this.isaccountShow=false；
this.dynamicArray[index].dropdownDataDb=this.dbValue；
}
如果（值==2）{
this.isdbShow=false；
this.isdesktopShow=true；
this.isaccountShow=false；
this.dynamicArray[index].dropdownDataDesktop=this.desktopValue；
}
如果（值==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>


行动
钥匙
价值
数据库
桌面
账户
{{data}}
{{data？.name？data？.name:data}
ts code
dynamicArray:Array=[]；
newDynamic:any={}；
dbValue=[“mysql”、“oracle”、“mongo”]；
desktopValue=[
{id:“1”，名称：“dell”}，
{id:“2”，名称：“联想”}，
{id:“3”，名称：“hp”}
];
ngOnInit（）：void{
this.newDynamic={
标题1:“，
标题2:“，
dropdownDataDb:[]，
dropdownDataDesktop:[]，
isDropDown：正确
};
this.dynamiccarray.push（this.newDynamic）；
}
addRow（索引）{
this.newDynamic={
标题1:“，
标题2:“，
dropdownDataDb:[]，
dropdownDataDesktop:[]，
isDropDown：是的，
isText:错
};
this.dynamiccarray.push（this.newDynamic）；
console.log（this.dynamicArray）；
返回true；
}
删除行（索引）{
if（this.dynamicArray.length==1）{
返回false；
}否则{
这个.dynamicArray.拼接（索引1）；
返回true；
}
}
已更改（值：任意，索引：任意）{
console.log（this.dynamicArray[index].title1）；
如果（值==1）{
this.dynamicArray[index].isDropDown=true；
this.dynamicArray[index].isText=false；
this.dynamicArray[index].dropdownDataDb=this.dbValue；
}
如果（值==2）{
this.dynamicArray[index].isDropDown=true；
this.dynamicArray[index].isText=false；
this.dynamicArray[index].dropdownDataDesktop=this.desktopValue；
}
如果（值==3）{
this.dynamicArray[index].isDropDown=false；
this.dynamicArray[index].isText=true；
}
}

行动
钥匙
价值
数据库
桌面
账户
{{data}}
{{data？.name？data？.name:data}
请检查此hi bro请检查此i set boutry alsoHi bro如果您有空请检查此