基于选择输入框和选择下拉列表的 Angular-6 未正确显示 [英] Angular-6 based on the select inputbox and select dropdown not showing properly
问题描述
这个问题可能会被问到,但这并不能解决我的问题.
键的下拉
包含database
、desktop
和account
.根据 key 的下拉,值 drop-down
和 inputbox
将被改变.
https://stackblitz.com/edit/angular-ivy-zahevb?file=src%2Fapp%2Fapp.component.html
<块引用>我的问题:当我点击第一行时,它看起来不错.但是当我移动到第二行时,数据附加不正确.当我选择 account
之前的行下拉列表也更改为 inputbox
例如:
- 在第一行我选择数据库,值应该在
drop-down
中附加 ['mysql', 'oracle', 'mongo'] - 在第 2 行我选择桌面,值应附加 ['dell', 'lenovo', 'hp']
- 在第 3 行我选择帐户
inputbox
将显示
app.component.ts
import { Component, VERSION } from '@angular/core';@成分({选择器:'我的应用',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {动态数组:数组<任何>= [];newDynamic: any = {};dbValue = [mysql"、oracle"、mongo"];desktopValue = [{'id':'1', 'name':'dell'}, {'id':'2', 'name':'lenovo'}, {'id':'3', 'name':'生命值'}];isdbShow:boolean = false;isdesktopShow:boolean = false;isaccountShow:boolean = false;ngOnInit(): 无效 {this.newDynamic = { title1: "", title2: "", dropdownDataDb: [], dropdownDataDesktop: [] };this.dynamicArray.push(this.newDynamic);}添加行(索引){this.newDynamic = { title1: "", title2: "", dropdownDataDb: [], dropdownDataDesktop: [] };this.dynamicArray.push(this.newDynamic);控制台日志(this.dynamicArray);返回真;}删除行(索引){如果(this.dynamicArray.length == 1){返回假;} 别的 {this.dynamicArray.splice(index, 1);返回真;}}改变(值,索引){让 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
<table class="table table-striped table-bordered"><头><tr><th>Action</th><th>key</th><th>值</th></tr></thead><tr *ngFor="let dynamic of dynamicArray;让 i = 索引;"><td(点击)=deleteRow(i)"><i class="fa fa-trash fa-2x"</i></td><td><select [(ngModel)]=dynamicArray[i].title1";类=表单控制"#sel(change)=已改变(sel.value, i)"><option [value]='1'>数据库</option><option [value]='2'>桌面</option><option [value]='3'>账户</option></选择></td><td><!-- 显示数据库数据--><select *ngIf="isdbShow";[(ngModel)]=dynamicArray[i].title2";class =表单控件"><option *ngFor="let data of dynamicArray[i].dropdownDataDb;">{{data}}</option></选择><!-- 显示桌面数据--><select *ngIf="isdesktopShow";[(ngModel)]=dynamicArray[i].title2";class =表单控件"><option *ngFor="let data of dynamicArray[i].dropdownDataDesktop;">{{data?.name ?data?.name : data}}</option></选择><!-- 显示账户数据--><input *ngIf="isaccountShow";类型=文本"[(ngModel)]=dynamicArray[i].title2";class =表单控件"></td></tr><tr><td(点击)=addRow(0)"><i class=fa fa-plus fa-2x"</i></td></tr></tbody> 解决方案 ts code
dynamicArray: Array= [];newDynamic: any = {};dbValue = ["mysql", "oracle", "mongo"];桌面值 = [{ id: "1", name: "dell" },{ id: "2", name: "lenovo" },{ id: "3", name: "hp" }];ngOnInit(): 无效 {this.newDynamic = {标题1:",标题2:",dropdownDataDb: [],下拉数据桌面:[],isDropDown: 真};this.dynamicArray.push(this.newDynamic);}添加行(索引){this.newDynamic = {标题1:",标题2:",dropdownDataDb: [],下拉数据桌面:[],isDropDown: 真,isText: 假};this.dynamicArray.push(this.newDynamic);控制台日志(this.dynamicArray);返回真;}删除行(索引){如果(this.dynamicArray.length == 1){返回假;} 别的 {this.dynamicArray.splice(index, 1);返回真;}}更改(值:任何,索引:任何){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;}}
<table class="table table-striped table-bordered"><头><tr><th>Action</th><th>key</th><th>值</th></tr></thead><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'>数据库</option><option [value]='2'>桌面</option><option [value]='3'>账户</option></选择></td><td><!-- 显示数据库数据--><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 *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></选择><!-- 显示账户数据--><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>This question is maybe asked, but that is not solving my issue.
The drop-down
of key contains database
, desktop
and account
. Based on the drop-down of key the value drop-down
and inputbox
will be changed.
https://stackblitz.com/edit/angular-ivy-zahevb?file=src%2Fapp%2Fapp.component.html
My issue: When I click 1st row it seems good.
But when I move on to 2nd row the data append not properly. And when I select account
previuos row drop-down also changed as inputbox
Eg:
- In 1st row I select Database,value should append ['mysql', 'oracle', 'mongo'] in
drop-down
- In 2nd row I select Desktop, value should append ['dell', 'lenovo', 'hp']
- In 3rd row I select Account the
inputbox
will show
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: "", 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;
}
}
}
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: "",
title2: "",
dropdownDataDb: [],
dropdownDataDesktop: [],
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>
这篇关于基于选择输入框和选择下拉列表的 Angular-6 未正确显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆