Angular 下拉更改-显示[对象]的数据

我正在尝试将JSON数据绑定到下拉列表。OnChnge函数我在调试相应的组件时将值传递给相应的组件，显示

[object]

我的JSON值

dataLists = [
    { 'id': 1, 'host_name': 'Service 1', 'port': '8090', 'username': 'user1', 'password': 'abc' },
    { 'id': 2, 'host_name': 'Service 1', 'port': '8090', 'username': 'user2', 'password': 'abc' },
    { 'id': 3, 'host_name': 'Service 1', 'port': '8090', 'username': 'user3', 'password': 'abc' }
];

html代码

<select #selectedData (change)="selected($event,selectedData.value)">
            <option>Select....</option>
            <option *ngFor="let dataList of dataLists"  [value]="dataList">{{dataList.host_name}}</option>
        </select>

如何在组件中以json格式获取数据。

---

像

{'id'：1，'host_name'：'Service 1'，'port'：'8090'，'username'：'user1'，'password'：'abc'}

默认情况下，

value

属性接受字符串值（将对象转换为字符串将产生

[object object]

）。要将对象用作值，请使用接受任何类型作为值的属性

<option *ngFor="let dataList of dataLists"  [ngValue]="dataList">{{dataList.host_name}}</option>

---

请修改您的代码如下

HTML:

<select  (change)="selected()" [(ngModel)]="drp_selectedValue">
        <option>Select....</option>
        <option *ngFor="let dataList of dataLists" (click)="selectedEA(dataList)" 
          [ngValue]="dataList">{{dataList.host_name}}
        </option>
</select>

 drp_selectedValue :any;


 selected() {
   console.log( this.drp_selectedValue);
 }

---

我有另一个解决办法，它很好用

html

选择。。。。。。。。
{{dataList.host_name}

ts

已选择（ev:事件，数据：任意）{
for（设i=0；i

将[value]更改为[ngValue]即可

<select [(ngModel)]="selectedDataList" (change)="selected()">
   <option>Select....</option>
   <option *ngFor="let data of dataLists" [ngValue]="data">{{data.host_name}}    </option>
</select>

export class SelectOverviewExample {
     selectedDataList: any = {};
     dataLists: any[] = [
           { 'id': 1, 'host_name': 'Service 1', 'port': '8090', 'username': 'user1', 'password': 'abc' },
           { 'id': 2, 'host_name': 'Service 2', 'port': '8090', 'username': 'user2', 'password': 'abc' },
           { 'id': 3, 'host_name': 'Service 3', 'port': '8090', 'username': 'user3', 'password': 'abc' }
     ];

selected() {
  console.log(this.selectedDataList);
}

选择。。。。
{{data.host_name}
导出类SelectOverview示例{
SelectedCatalist:any={}；
数据列表：任意[]=[
{'id'：1，'host_name'：'Service 1'，'port'：'8090'，'username'：'user1'，'password'：'abc'}，
{'id'：2，'host_name'：'Service 2'，'port'：'8090'，'username'：'user2'，'password'：'abc'}，
{'id'：3，'host_name'：'Service 3'，'port'：'8090'，'username'：'user3'，'password'：'abc'}
];
选定的（）{
console.log（this.selectedCatalist）；
}

---

}

我可以在下拉列表中显示值。更改此下拉列表后，我会将数据列表传递给组件。每个数据列表都有json。在组件端，它显示为[object object]，我希望这一个有帮助

<select  (change)="selected()" [(ngModel)]="drp_selectedValue">
        <option>Select....</option>
        <option *ngFor="let dataList of dataLists" (click)="selectedEA(dataList)" 
          [ngValue]="dataList">{{dataList.host_name}}
        </option>
</select>

 drp_selectedValue :any;


 selected() {
   console.log( this.drp_selectedValue);
 }

 <select #selecteData (change)="selected($event,selecteData.value)">
                <option>Select........</option>
                <option *ngFor="let dataList of dataLists" [value]="dataList.id">{{dataList.host_name}}</option>
            </select>

selected(ev: Event, data: any) {
         for (let i = 0; i < this.dataLists.length; i++) {
            if (this.dataLists[i].id === parseInt(data, 10)) {
                console.log(this.dataLists[i]);
                break;
            }
        }
        }

<select [(ngModel)]="selectedDataList" (change)="selected()">
   <option>Select....</option>
   <option *ngFor="let data of dataLists" [ngValue]="data">{{data.host_name}}    </option>
</select>

export class SelectOverviewExample {
     selectedDataList: any = {};
     dataLists: any[] = [
           { 'id': 1, 'host_name': 'Service 1', 'port': '8090', 'username': 'user1', 'password': 'abc' },
           { 'id': 2, 'host_name': 'Service 2', 'port': '8090', 'username': 'user2', 'password': 'abc' },
           { 'id': 3, 'host_name': 'Service 3', 'port': '8090', 'username': 'user3', 'password': 'abc' }
     ];

selected() {
  console.log(this.selectedDataList);
}