时间戳

首页 > 解决方案 > 渲染匹配数组参数的 div

html - 渲染匹配数组参数的 div

问题描述

我在 Angular 8 中渲染参数时遇到问题，我从 API 获取数据，我需要在与这些数据匹配的 div 中渲染这些数据，但我遇到了数据显示在每个div 中的问题，它看起来像这样：

在此处输入图像描述

在这里，“Drops”、“Misc”、“Network”是需要渲染较低类别的主要 div。Altought，我想要的是例如，在主“Drops”中只有“Drops Aluminium”，在“Misc”中只有“VANNE”，在“Network”中只有“Main”。较低的类别应仅在其 id 位于主id内时呈现（见下图 2）。

我尝试过的：

绑定 div 内的值，因为所有主要和较低类别的 id 如下所示：

在此处输入图像描述

这是一个 stackblitz 示例：https ://stackblitz.com/edit/angular-me2ppb?file=src%2Fapp%2Fapp.component.ts

提前感谢您的时间和帮助，非常感谢！

标签： htmlarraysangular

解决方案

您在这里有 2 个选项：

  1. 调整您的 HTML 以适当地循环total_by_level和查询label_name

  2. 在代码中构建输出

看起来你已经尝试了两者，因此对任何一个都持开放态度。就个人而言，我更喜欢在代码中做尽可能多的事情，并使 HTML 尽可能地笨拙，所以我会采用方法 2。

在ngOnInit()（这应该是您进行任何初始处理的地方），我将基于total_by_level.

output: any[];

ngOnInit() {    
  this.output = Object.keys(this.total_by_level).map(levelKey => {
    const child = this.total_by_level[levelKey];

    return {
      level: {
        label: this.label_name[levelKey]          
      },
      children: Object.keys(child).map(childKey => ({
        label: this.label_name[childKey],
        value: child[childKey]
      }))
    };
  });
}

然后在你的 HTML 中绑定到这个数组变得很简单：

<div *ngFor="let item of output">
  {{item.level.label}}
  <div *ngFor="let child of item.children">
    {{child.label}}
    {{child.value}}
  </div>
</div>

你正在处理一些奇怪的数据结构，我不确定你的术语，所以我在这里猜到了一点。您可以采用这个想法的概念并使用它。我还假设在total_by_level.

演示：https ://stackblitz.com/edit/angular-upqdex

推荐阅读