我有一个 API，我需要从中获取两个 JSON，重要的是：

关系：

  {
    "id": 0,
    "source": {
      "id": 0
    },
    "target": {
      "id": 0
    },
    "type": 0
  }

另一个带来了一些带有标签的事件，我需要他们的名字和 ID。

关系的 JSON 有 asource ID和 atarget ID和 a type。它用于创建事件之间的关系。

举个例子：假设我有两个ID 为 1和ID 2的事件，我想在它们之间创建一个关系，所以source ID 我添加 ID 1并target ID 添加 ID 2并添加一个类型（1、2 或 3）给它。这样，您将在事件 1 与事件 2 之间建立关系。

现在，我有一个这样的表：

其中列的标题必须是事件的总数，在这种情况下有 3 个事件。并且在行中相同。假设它是一个 nxn 事件表。

这个想法是一个数组，例如，test event 2与 test event 1有关系并且只有test event 1。好吧，在那一排应该有一个1 - -. 连字符表示什么都没有，1 表示关系的类型。

要获取关系列表，我有以下方法：

  private getRelaciones(idRevision){
    this.relacionService.getRelaciones(idRevision).subscribe(
      (data:any) => {
        this.relaciones = data;
        console.log(this.relaciones);
      }
    );
  }

我在这里存储数据：relaciones: any[] = [];

我在以下调用方法ngOnInit：this.getRelaciones(this.idRevision);

我在服务类中有 API 调用方法：

  getRelaciones(idRevision: string){
    return this.http.get(`${this.URL}/relation?revisionId=${idRevision}`,this.OPCIONES);
  }

但是我不能那样显示数据，而且我已经为此工作了好几个小时。

这就是我现在拥有这张桌子的方式：

<table class="table table-bordered">

    <thead>
        <tr>
            <th scope="col"></th>
            <th *ngFor="let evento of eventos" scope="col">{{evento['name']}}</th>
        </tr>
    </thead>

    <tbody *ngFor="let evento of eventos">
        <tr>
            <td><b>{{evento['name']}}</b></td>
            <td *ngFor="let relacion of relaciones">{{relacion['type']}}</td>
        </tr>
    </tbody>

</table>

但它向我展示了每一行中的重复值。在我进行非常混乱的检查之前，我一整天都在删除和编辑代码。有什么办法吗？

编辑 07/09

应用莱格纳的答案：

<table class="table table-bordered">
    <thead>
        <tr>
            <th></th>
            <th *ngFor="let evento of eventos" scope="col">{{evento['name']}}</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let relacion of relaciones">
            <th scope="row">{{getNameEvent(relacion['source']['id'])}}</th>
            <td *ngFor="let evento of eventos">
                {{evento['id'] === relacion['target']['id'] ? relacion['type'] : "--" }}
            </td>
        </tr>
    </tbody>
</table>

通过改变每次迭代的顺序，我已经设法让它的大部分工作：

好吧，标题按应有的方式显示，并且每个单元格的内容都非常合适。但我有问题：如图所示，测试事件 2有 2 个关系，但它是重复的。您应该会看到包含您的关系类型的单行。我该如何解决？

事件：

  {
    "id": 0,
    "code": "string",
    "name": "string",
    "description": "string",
    "image": "string",
    "category": 0,
    "revision": {
      "id": 0
    }
  }

所以我从 API 加载事件列表，在ngOnInit：

  private cargarEventos(idRevision: string){
    this.eventoService.getEventos(idRevision).subscribe(
      (data: any) => {
        this.eventos = data;
      }
    );
  }

要获取事件列表，需要将评论的ID作为参数传递，但您不必注意这一点。

正如我在答案中提到的，关系由两个事件 ID（source和target）和一个类型组成。

真实数据：

事件数据：

[ {
    "id": 1,
    "code": "code-007",
    "name": "Evento ejemplo 1",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 7
  },
  {
    "id": 2,
    "code": "code-016",
    "name": "Evento ejemplo 2",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 10
  },
    {
    "id": 3,
    "code": "code-021",
    "name": "Evento ejemplo 3",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 3
  },
    {
    "id": 4,
    "code": "code-089",
    "name": "Evento ejemplo 4",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 12
  },
    {
    "id": 5,
    "code": "code-0227",
    "name": "Evento ejemplo 5",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 1
  },
    {
    "id": 6,
    "code": "code-007",
    "name": "Evento ejemplo 6",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 10
  },
    {
    "id": 7,
    "code": "code-097",
    "name": "Evento ejemplo 7",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 80
  }
]

关系数据：

[
  {
    "id": 1,
    "source": {
      "id": 1
    },
    "target": {
      "id": 2
    },
    "type": 2
  },
    {
    "id": 2,
    "source": {
      "id": 2
    },
    "target": {
      "id": 4
    },
    "type": 1
  },
    {
    "id": 3,
    "source": {
      "id": 1
    },
    "target": {
      "id": 5
    },
    "type": 3
  },
    {
    "id": 4,
    "source": {
      "id": 5
    },
    "target": {
      "id": 6
    },
    "type": 0
  }
]

我给你留下了7 个事件和 4 个关系的列表，就好像它们来自 API，这是我有权显示的数据。我必须在行和列中将每个事件的名称显示为标题。所以在这种情况下它将是一个7x7 表。