问题描述
这个问题可能会被问到,但这并不能解决我的问题。
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>