Javascript 在模板中显示动态生成的字段-嵌套在对象中的对象中的字段

我正在从服务器检索一些数据，其结构如下（只是一个示例，我的实际对象有更多字段）：

现在，为了在模板中显示它，我得到了每个字段键的翻译。因为我的实际对象有这么多字段，我想在模板中迭代这些字段（而不是为每个字段创建html容器），所以我创建了一个对象，将转换键映射到来自服务器的对象中的字段名：

  objMap = [
    { translationKey: 'userFirstName', field: 'name' },
    { translationKey: 'userCity', field: 'details.city' }
  ];

现在，在我的模板中，我这样做是为了显示每个字段，只是我不知道如何显示

objFromServer.details.city

：

<div *ngFor="let item of objMap">
  {{ item.translationKey | translate }}: {{ objFromServer[item.field] }}
</div>

{{item.translationKey}}:{{objFromServer[item.field]}

当然，对于顶级字段，

name

，模板可以执行

objFromServer[name]

，因此工作正常。但是，它还将尝试执行

objFromServer[details.city]

——这实际上不起作用。我尝试了很多用括号表示的方法来让它工作。。。比如将

字段

更改为

“[details][city]”

，但没有运气

闪电战：

---

我试图在模板中实现的目标是否可能，而不必首先展平

objFromServer

？如果是这样，任何建议都将不胜感激。

最简单的方法是创建一个基于键路径的函数（例如：

'details.city'

），分离每个键并向下搜索对象，直到它到达所需的键

尝试将此函数添加到组件或服务类

getMapValue(field: string) {
  const keys = field.split('.');
  let obj: any = this.objFromServer;
  keys.forEach(key => obj = obj[key]);

  return obj;
}

然后，在模板中，使用相应的键路径调用该函数，如下所示：

<div *ngFor="let item of objMap">
  {{ item.translationKey }}: {{ getMapValue(item.field) }}
</div>

及其用途：

<div *ngFor="let item of objMap">
  {{ item.translationKey }}: {{ item.field | objectKey: objFromServer }}
</div>

{{item.translationKey}:{{item.field | objectKey:objFromServer}

---

工作示例：

是否可以创建一个帮助函数或过滤器来解析字段并从对象返回值？所以你会有这样的想法：

{{item.tramslationKey | tranlate}}:{{objFromServer | byComplexKey（item.field）}

哇，很好的解决方案。非常感谢你！

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: 'objectKey',
  pure: true
})
export class ObjectKeyPipe implements PipeTransform {

  transform(field: string, object): any {
    const keys = field.split('.');
    let obj: any = object;
    keys.forEach(key => obj = obj[key]);

    return obj;
  }

}

<div *ngFor="let item of objMap">
  {{ item.translationKey }}: {{ item.field | objectKey: objFromServer }}
</div>