angular - 在Angular 8的子迭代中按其ID显示父名称

Question

我们如何在显示子数据时通过 id 显示父名称，子数据具有父 id，应该显示父名称而不是 ID。
家长类

export class Parent {
  'id': number;
  'name': string;
}

child 类

export class Child {
  'id': number;
  'name': string;
  'parentId:number;
}

子 HTML 代码示例

<div>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Name</th>
          <th scope="col">Parent Id</th>
        </tr>
      </thead>
      <tbody *ngFor="let cl of childList">
        <tr>
          <td>{{cl.id}}</td>
          <td>{{cl.name}}</td>
          <td>{{cl.parentId}}</td>
        </tr>
      </tbody>
    </table>
  </div>

结果输出是

ID .  Name    .  Parent Id
1  .  Shireen .  11
2  .  Talisa  .  11
3  .  Olenna  .  9
4  .  Myranda .  8

现在我想显示父名称而不是 ID
例如像下面

ID .  Name    .  Parent Name
1  .  Shireen .  Raj
2  .  Talisa  .  Raj
3  .  Olenna  .  Nag
4  .  Myranda .  John

提前致谢，如果需要，很乐意分享代码

Answer 1

您可以为父级添加 getter，传递 id 并获取名称:

  childList:Child[] = [
    {id: 1, name: 'child1', parentId: 10},
    {id: 2, name: 'child2', parentId: 11},
    {id: 3, name: 'child3', parentId: 12},
  ]

  parentList: Parent[] = [
    {id: 10, name: 'Parent10'},
    {id: 11, name: 'Parent11'}
  ]

  getParentNameById(id: number) {
    const parent =  this.parentList.find((parent) => parent.id === id)
    if (!parent) {
      // we not found the parent
      return ''
    }

    return parent.name
  }

Html 模板现在调用这个新函数:

<tbody *ngFor="let cl of childList">
    <tr>
        <td>{{cl.id}}</td>
        <td>{{cl.name}}</td>
        <td>{{getParentNameById(cl.parentId)}}</td>
    </tr>
</tbody>

您可以在此处看到的所有工作代码: https://stackblitz.com/edit/angular-dsjsch

编辑

@gaurangdhorda 建议使用管道而不是在 html 模板中调用方法。

这里可以在 html 模板中使用管道代码来通过 id 获取父级的名称:

@Pipe({ name: 'name_by_id' })
export class GetNameByIdPipe implements PipeTransform {
  transform(parentList: Parent[], id: number) {
    const parent =  parentList.find((parent) => parent.id === id)
    if (!parent) {
      // we not found the parent
      return ''
    }

    return parent.name
  }
}

将此管道添加到 declarations 后在 AppModule (或另一个取决于项目结构)。 Html 模板可以编辑为使用管道 name_by_id :

<tr>
    <td>{{cl.id}}</td>
    <td>{{cl.name}}</td>
    <td>{{parentList | name_by_id:cl.parentId }}
</tr>

parentList | name_by_id:cl.parentId

parentList - 它将是函数 transform 中的第一个参数在管道类中，我们传递我们的数组 Parent

cl.parentId - 这将是第二个参数，我们传递父级的 ID

我已经更新了 https://stackblitz.com/edit/angular-dsjsch 中的代码