一些嵌套JSON对象的角度自定义过滤器

Question

我想根据用户当前使用的设备的MAC地址为用户使用角度过滤器。我有一些JSON数据，我需要帮助的试用版自定义过滤器。

我的自定义自定义过滤器：

  getCurrentUser(): User {
    return USERS.filter((user) => user.devices, mac_id == 44:44:44:44:44)[0];
  }

export const USERS: User[] = [
  {
    id: 1,
    email: 'yacie.qbi.com',
    pword: '123',
    fname: 'Tatenda Y',
    lname: 'Gatsi',
    date: '2012-10-16T17:57:28.556094Z',
    sa: 1,
    devices: [
      {
        mac_id: '33:33:33:33:33',
        imei: 91011,
        fone_no: 8888,
      }
    ]
  },
  {
    id: 2,
    email: 'chiko.qbi.com',
    pword: '123',
    fname: 'Tatenda Y',
    lname: 'Gatsi',
    date: '2015-09-16T02:00:28.015982Z',
    sa: 1,
    devices: [
      {
        mac_id: '44:44:44:44:44',
        imei: 91011,
        fone_no: 8888,
      }
    ]
  }
]

我希望获得类似的结果：HTML中的用户ID和Mac_id，例如

  <mat-card *ngIf="user" fxFlex>
    <mat-card-content>
      <div>User ID: {{user.id}}</div>
      <div>Current MAC Address: {{user.devices.mac_id}}</div>
    </mat-card-content>
  </mat-card>

Answer 1

基于注释的其他信息，您想显示一个用户，其mac_id为'44:44:44:44:44'。

您的过滤器功能不正确。 devices是一个数组，您没有在搜索该数组。您可以使用Array.some()查看是否至少有一个设备指定了mac_id。

getCurrentUser(): User { 
  // Only returning first user from filtered users.
  return USERS.filter(user => 
    user.devices.some(item => item.mac_id === '44:44:44:44:44'))[0];
} 

然后修改您的HTML以显示该用户。 devices[0]给出devices数组中的第一个设备。

<mat-card *ngIf="user" fxFlex>
  <mat-card-content>
    <div>User ID: {{user.id}}</div>
    <div>Current MAC Address: {{user.devices[0].mac_id}}</div>
  </mat-card-content>
</mat-card>