Question

我有一个包含networkInterface数组的对象services 现在我想创建一个复选框输入，以反映service_id

的services数组中特定networkInterface的存在

`interfaces：

的JSON示例

[  
   {  
      "id":11,
      "name":"External Interface",
      "services":[  
         {  
            "id":1,
            "name":"Web Service"
         },
         {  
            "id":2,
            "name":"FTP Service"
         }
      ]
   }
]

现在通常（在TypeScript中）这将完成：

networkInterfaces.services.filter(i => i.id == service.id)[0]

这将返回null或一个对象，但我怎样才能在我的html模板中执行此操作？当我试着这样说时：

<input type="checkbox" [(ngModel)]="networkInterfaces.services.filter(i => i.id == service.id)[0]">

我收到此错误：

分析器错误：绑定不能包含第38列中的分配 [networkInterfaces.services.filter（i =＆gt; i.id == service.id）[0]]

任何帮助都将非常感激。

Answer 1

首先要做到这一点是个坏主意。每次更改检测运行时，都会重新执行此过滤器调用。这会拖累页面的性能，甚至可能无法使用。首选方法是为属性赋值并绑定到此属性。

constructor() {
  this.prop = interfaces.services.filter(i => i.id == service.id)[0];
}

propChanged(e) {
  interfaces.services.filter(i => i.id == service.id)[0] = e;
}

<input type="checkbox" [ngModel]="prop" (ngModelChange)="propChanged($event)">

Angular2 - 模板中的Array.prototype.filter（）

1 个答案: