链接到Angular中的组件的矩阵表

编程问答 2022-08-11

问题描述

我希望基于一些sql表在Angular中创建一个矩阵表。 我有3个表和相关的组件正在检索它们的数据：成员，问题和技能级别（链接到其他2个）。 一个成员可以具有不同技能级别（1到3）的不同类型的问题/领域的技能，所以我想要一张这样的表，例如： [1]：https://i.stack.imgur.com/G37tb.png 因此，对于x轴，问题列表，对于y轴的成员列表，以及技能水平作为主要数据。

下面是问题组件的代码，例如，使用我的方法来检索问题：

import { Component,OnInit } from '@angular/core';
import {IssuesService} from './issues.service';
import {Issues} from './issues.interface';
import {Router} from "@angular/router";

@Component({
  selector: 'app-issues',templateUrl: './issues.component.html',styleUrls: ['./issues.component.css']
})
export class IssuesComponent implements OnInit {

  issues: Issues[];

  constructor(private issuesService: IssuesService,private router: Router) { }

  ngOnInit() {
    this.issuesService
      .getIssue()
      .subscribe((data: Issues[]) => {
        this.issues = data;
      });
  }}

我的数组Issues []看起来如何：

0: {Id_OnCall_Issue: 1,OnCall_Issue: "rugby"}
1: {Id_OnCall_Issue: 2,OnCall_Issue: "Archi"}
2: {Id_OnCall_Issue: 3,OnCall_Issue: "Node"}
3: {Id_OnCall_Issue: 4,OnCall_Issue: "JS"}
4: {Id_OnCall_Issue: 5,OnCall_Issue: "Java"}
5: {Id_OnCall_Issue: 6,OnCall_Issue: "tennis"}
6: {Id_OnCall_Issue: 9,OnCall_Issue: "football"}
7: {Id_OnCall_Issue: 10,OnCall_Issue: "Mathématiques"}
8: {Id_OnCall_Issue: 11,OnCall_Issue: "Barbecue"}
9: {Id_OnCall_Issue: 12,OnCall_Issue: "Flute"}
10: {Id_OnCall_Issue: 13,OnCall_Issue: "Problème 1"}
length: 11

我设法为每个组件创建一个普通表，但是我确实想要所有组件的矩阵表。我看了一些教程，但找不到合适的解决方案。

我找到了这段代码，这可能是我所需要的，但是我不知道如何使它适应我的数据。我看不到如何将我的组件连接到ng-repeat的范围。

 <div id="container" ng-controller="MainCtrl">
  <table>
    <thead>
      <tr>
        <th></th>
        <th ng-repeat="year in years">{{year}}</th> //Could be replaced with my "issues"
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="name in names">
        <th>{{name}}</th> //Could be replaced with my "members"
        <td ng-repeat="year in years">{{tallies[year][name] || 0}}</td> //Could by replaced with my "skill level"
      </tr>
    </tbody>
  </table>
</div>

有人可以帮我吗？ 预先非常感谢：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangularjs-ng-repeatmatrixmatrix