如何使用ngModel将动态数据与输入字段绑定

时间:2020-08-28 13:12:36

标签: html angular

我有一个动态列表,其中包含一些输入和选择字段,并且我想使用这些字段来绑定动态数据。我尝试使用ngModel进行绑定,但是它仅显示最后一个对象的条目。这是我要绑定的数据

properties=[
   {
    "Id": "01",
    "PropertyType": null,
    "PropertyTypeId": 1,
    "PropertyName": "Name",
    "AdditionalList": []
  },
  {
    "Id": "02",
    "PropertyType": null,
    "PropertyTypeId": 1,
    "PropertyName": "Phone",
    "AdditionalList": []
  },
  {
    "Id": "03",
    "PropertyType": null,
    "PropertyTypeId": 1,
    "PropertyName": "Work Phone",
    "AdditionalList": []
  }]

预期输出应为enter image description here

预先感谢...

1 个答案:

答案 0 :(得分:0)

  propertyTypes= [
    { id: 1, name: "List" },
    { id: 2, name: "Text" },
  ];
selectedValue = null;

这就是绑定所选值的方式

<select [(ngModel)]="selectedValue" (click)="showSelected()">
  <option *ngFor="let c of propertyTypes" [ngValue]="c.type">
    {{ c.type }}
  </option>
</select>

这是一个提示,说明如何使用showselected方法处理的选定对象

 showSelected(item) {
    console.log(this.selectedValue);
  }