I have 2 types of drop-down
based on the select value column drop-down
will show.
(one for to show database data, another one for to show desktop data.)
https://stackblitz.com/edit/angular-ivy-3n238j?file=src%2Fapp%2Fapp.component.html
app.componet.html
JavaScript
x
10
10
1
<!-- show database data -->
2
<select *ngIf="isdbShow" [(ngModel)]="dynamicArray[i].title2" class="form-control">
3
<option *ngFor="let data of dynamicArray[i].dropdownData;">{{data}}</option>
4
</select>
5
6
<!-- show desktop data -->
7
<select *ngIf="isdesktopShow" [(ngModel)]="dynamicArray[i].title2" class="form-control">
8
<option *ngFor="let data of dynamicArray[i].dropdownData;">{{data.name}}</option>
9
</select>
10
My issue is below
- In 1st row if I select
desktop
it will show desktop data’s in value columndrop-down
. - In 2nd row if I select
database
,desktop
will be showed as[object object]
check bellow image
app.component.ts
JavaScript
1
50
50
1
import { Component, VERSION, OnInit } from "@angular/core";
2
3
@Component({
4
selector: "my-app",
5
templateUrl: "./app.component.html",
6
styleUrls: ["./app.component.css"]
7
})
8
export class AppComponent {
9
dynamicArray: Array<any> = [];
10
newDynamic: any = {};
11
dbValue = ["mysql", "oracle", "mongo"];
12
desktopValue = [{'id':'1', 'name':'dell'}, {'id':'2', 'name':'lenovo'}, {'id':'3', 'name':'hp'}];
13
isdbShow:boolean = false;
14
isdesktopShow:boolean = false;
15
ngOnInit(): void {
16
this.newDynamic = { title1: "", title2: "", dropdownData: [] };
17
this.dynamicArray.push(this.newDynamic);
18
}
19
addRow(index) {
20
this.newDynamic = { title1: "", title2: "", dropdownData: [] };
21
this.dynamicArray.push(this.newDynamic);
22
console.log(this.dynamicArray);
23
return true;
24
}
25
26
deleteRow(index) {
27
if (this.dynamicArray.length == 1) {
28
return false;
29
} else {
30
this.dynamicArray.splice(index, 1);
31
return true;
32
}
33
}
34
35
changed(value, index) {
36
let dropdownData;
37
if (value == 1) {
38
this.isdbShow = true;
39
this.isdesktopShow = false;
40
this.dynamicArray[index].dropdownData = this.dbValue;
41
}
42
43
if (value == 2) {
44
this.isdbShow = false;
45
this.isdesktopShow = true;
46
this.dynamicArray[index].dropdownData = this.desktopValue;
47
}
48
}
49
}
50
Please check the flow in my demo link with same scenario. 1st row select
desktop
and 2nd rowdatabase
Advertisement
Answer
Try this
JavaScript
1
4
1
<select *ngIf="isdbShow" [(ngModel)]="dynamicArray[i].title2" class="form-control">
2
<option *ngFor="let data of dynamicArray[i].dropdownData;">{{data?.name ? data?.name : data}}</option>
3
</select>
4