从对象中的对象（角度）的对象字段中的 TypeScript 设置值答案

【问题标题】：TypeScript set value in object field from object in object (Angular)从对象中的对象（角度）的对象字段中的 TypeScript 设置值
【发布时间】：2020-05-20 03:00:02
【问题描述】：

我有一个界面

export interface Shelving {
  _id?: string,
  name: string,
  location: string,
  comment: string,
  catID: string,
  catName: string
}

从我从服务器获取数据的服务

  fetch(): Observable<Shelving[]> {
    return this.http.get<Shelving[]>('api/shelving')
  }

来自服务器的对象

{
  "_id": "5ec3edbab1565f5d671c201e",
  "name": "89",
  "comment": "",
  "catID": "",
  "catName": "5ec3ed79b1565f5d671c201c",
  "location": "5ec3eccef1d51c3a48bd722e",
  "__v": 0,
  "categoryName": [    <-------------- object
    {
      "_id": "5ec3ed79b1565f5d671c201c",
      "catName": "test category name",  <------------------ name I needed
      "comment": "",
      "__v": 0
    }
  ],
  "locationObj": [
    {
      "_id": "5ec3eccef1d51c3a48bd722e",
      "name": "yyy",
      "phone": "+2310232309",
      "comment": "",
      "address": "EGNATIA 156",
      "__v": 0
    }
  ]
}

问题是： 如何将类别名称从对象推送到数组？ 我想在 html 组件中打印一个值。像这样的东西： {{ 搁置.catName }} 但现在我是这样打印的：

<td>{{ shelving.categoryName[0].catName }}</td>

我觉得这不是真正的方式-_-

【问题讨论】：

标签： javascript angular typescript interface

【解决方案1】：

我可能误解了这个问题。如果你想要的话，我可以告诉你一种将这个值传递给模板的方法：

catNames$: Observable<Shelving[]> = this.http.get<Shelving[]>('api/shelving').pipe(
          map(({ categoryName }) => categoryName.map(cat => cat.catName)),
          shareReplay(1)
       );

在 html 上：

<td>{{ catNames$ | async }}</td>

所有这一切都是将来自服务器的值映射到您想要的形状，然后通过async 管道将这些值绑定到模板。 shareReplay(1) 用于确保每次更改检测运行时都不会命中 http 端点。

这里需要注意的是，您必须在 Shelving 接口上添加 categoryName 作为属性。

【讨论】：