angular - 下拉变化-数据显示[object object]

Question

我正在尝试将 JSON 数据绑定(bind)到下拉列表。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

默认情况下，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);
}