角度:管道以从表行中搜索对象

时间:2018-08-30 09:22:26

标签: angular angular-pipe

我有一个管道可以从表的行中搜索对象。杰森为此

[
  {
     device:{
               DeviceHostName: "Device_5_0_1_21",
               DeviceIPAddress: "5.0.1.21",
               DeviceId:"44"
            },
     selected:false
  },
  {
     device:{
               DeviceHostName: "Device_5_0_1_21",
               DeviceIPAddress: "5.0.1.21",
               DeviceId:"44"
            },
     selected:false
  }
}

管道

@Pipe({
  name: 'dashboardPipe'
})
export class DashboardPipe implements PipeTransform {
    public transform(value, filterBy: string) {
        filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
        return filterBy ? value.filter((row) => {
          (row.device.DeviceHostName + row.device.DeviceIPAddress + 
            row.device.DeviceId + row.device.DeviceOS +
            row.device.DeviceProductFamily)
          .toLocaleLowerCase().indexOf(filterBy) !== -1}) : value;
      }
}

HTML

<tbody>
    <tr *ngFor="let row of devicesData|dashboardPipe:listFilter; let n=index">
        <td>
            <label class="checkbox">
                <input type="checkbox" name="rowSelection" class="checker" [(ngModel)]="row.selected">
                <span class="checkbox__input"></span>
            </label>
        </td>
        <td>{{row.device.DeviceId}}</td>
        <td>{{row.device.DeviceHostName}}</td>
        <td>{{row.device.DeviceIPAddress}}</td>    
     </tr>
</tbody>

如果我使用以下JSON,即仅是带有键值的对象数组,则管道的工作原理绝对不错,并显示搜索过滤器结果

[
  {
     DeviceHostName: "Device_5_0_1_21",
     DeviceIPAddress: "5.0.1.21",
     DeviceId:"44",
     selected:false 
  },
  {
     DeviceHostName: "Device_5_1_1_47",
     DeviceIPAddress: "5.1.1.47",
     DeviceId:"45",
     selected:false     
  }
]

即使我传递了row.device。在管道逻辑中,它不过滤UI中的值。我要去哪里错了?

0 个答案:

没有答案