首页 文章

ngModel双向绑定嵌套* ngFor in angular

提问于
浏览 次
1

我的JSON看起来像：

"assets" : [ 
        {
            "resourceName" : "keyboard",
            "characteristics" : {
                "serialNo" : "abc123",
                "brand" : "DELL"
            }
        }, 
        {
            "resourceName" : "Domain Account"
        }
    ]

我正在执行双向绑定，以html格式显示serialNo和品牌值作为输入 . 这是我的html输入代码

<table border="0">
   <tr *ngFor="let r of assets; let i=index">
          <td>{{r.resourceName | uppercase}} :</td>
          <td *ngFor="let key of r.characteristics | keys;let in=index; trackBy:keys" >
   {{key | uppercase}}:
   <input name="r.characteristics[key]" value="r.characteristics[key]" [(ngModel)]="r.characteristics[key]">&nbsp;&nbsp;
             </td>
            </tr>
     </table>

在我的表单中，对于两个输入字段，我得到的值是DELL，这是品牌的 Value . 我希望"abc123"显示在serialNo字段中，DELL显示在品牌字段中 . 有关确切的问题描述，请参阅plnkr . 谢谢 .

html angular

1 回答

  • 0

    首先，我没有在你的代码片段中看到管道 keys ，它应该如下所示：

    @Pipe({ name: 'keys',  pure: false })

export class KeysPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)
    }
}

    此外，应正确设置name属性：

    HTML:

    <input name="someName[i]" [(ngModel)]="r.characteristics[key]">

    plunker

    回复于

相关问题