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

Question

我想根据用户当前使用的设备的 MAC 地址为用户使用 Angular 过滤器。我有一些 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>

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

Angular Custom Filters For Some Nested JSON Objects

angular-filters

angular