Question

我试图将JSON数据绑定到一个下拉列表。OnChnge函数在调试显示[object 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>

组件代码

selected(ev: Event, data: any []) {
        // console.log('data', data);
        for (const ea of data) {
            console.log(ea);

        }

如何在组件中以json格式获取数据。像{ 'id': 1, 'host_name': 'Service 1', 'port': '8090', 'username': 'user1', 'password': 'abc' }

Answer 1

请如下修改您的代码。

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>

ts：

 drp_selectedValue :any;


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

Answer 2

默认情况下，value属性接受字符串值（将对象转换为字符串将得到[object object]）。要将对象用作值，请使用ngValue属性，该属性接受任何类型的值。

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

最终代码如下：

模板：

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

TS：

selected(ev: Event, data: any) {
  console.log(data);
}

Answer 3

我还有另一种解决方案。它工作正常

html

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

ts

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;
            }
        }
        }

Answer 4

将[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);
}

}

下拉更改-显示[object object]的数据

4 个答案: