如何使用 ngFor 动态生成 HTML 表格。在角度

一种在不改变数据结构的情况下使其工作的可能方法。

首先是一些接口：

interface Activity {
  id: number;
  activity: string;
  subject: string;
  icon: string;
}

interface Attempt {
  grade: number;
  note: string;
}

interface ActivityAttemp {
  activityName: string;
  attempts: Attempt[];
}

interface ActivitiesBySubject {
  subject: string;
  activities: ActivityAttemp[];
}

从 data.activities 计算尝试次数：

attemptCounts: number[] = [];

const count =
  ((Object.values(this.data.activities)[0] as string[]).length - 1) / 2;
for (let i = 1; i <= count; ++i) {
  this.attemptCounts.push(i);
}

在将数据提供给 Angular 以对其进行一些预处理之前：

this.subjects.forEach((subject: string) => {
  this.activitiesBySubject.push({
    subject,activities: this.activities
      .filter((act: Activity) => act.subject === subject)
      .map((act: Activity) => {
        return {
          activityName: act.activity,attempts: this.getAttemptsForActivity(act.activity)
        };
      })
  });
});

这个想法是将所有需要的数据放在一个地方，这样 HTML 模板就变得更简单了：

<div style="overflow: auto">
  <table>
    <caption>Session Summary</caption>
    <tr>
      <th style="width: 40%"></th>
      <th style="width: auto"></th>
      <th style="width: auto" colspan="2" *ngFor="let attempt of attemptCounts">Attempt {{attempt}}</th>
    </tr>

    <tr>
      <th style="width: 40%">Subject Grouping</th>
      <th style="width: auto">Activity</th>

      <ng-container *ngFor="let attemptLabel of attemptCounts">
        <th style="width: auto">Grade</th>
        <th style="width: auto">Note</th>
      </ng-container>
    </tr>


    <ng-container *ngFor="let actsBySubj of activitiesBySubject">

      <tr>
        <td [attr.rowspan]="actsBySubj.activities.length + 1">
          {{ actsBySubj.subject }}
        </td>
      </tr>

      <tr *ngFor="let activity of actsBySubj.activities">
        <td>
          {{ activity.activityName }}
        </td>

        <ng-container *ngFor="let attempt of activity.attempts">

          <td>
            {{attempt.grade}}
          </td>
          <td>
            {{attempt.note}}
          </td>

        </ng-container>

      </tr>

    </ng-container>

  </table>
</div>

工作Stackblitz

感谢@GaurangDhorda 的初始 Stackblitz。

更新

要使用下拉菜单，必须将处理移至单独的方法：

  private calcTableData() {
    // reset
    this.attemptCounts = [];
    this.activitiesBySubject = [];

    // find exercise from "selectedExerciseId"
    const selectedExercise = this.data.find(
      (x: any) => x.id === this.selectedExerciseId
    );

    if (!selectedExercise) {
      return; // unable to find exercise
    }

    // calc attempt count eg.: 1,2,3
    for (let i = 1; i <= selectedExercise.attemptCount; ++i) {
      this.attemptCounts.push(i);
    }

    this.subjects.forEach((subject: string) => {
      this.activitiesBySubject.push({
        subject,activities: this.activities
          .filter((act: Activity) => act.subject === subject)
          .map((act: Activity) => {
            return {
              activityName: act.activity,attempts: this.getAttemptsForActivity(
                selectedExercise,act.activity
              )
            };
          })
      });
    });

    console.log(this.activitiesBySubject);
  }

此方法使用成员变量 selectedExerciseId 来获取所选项目。调色板也移至：

  colors: { [key: string]: string } = {
    Control: '#bfbfbf',AFCS: '#fac090','Situational Awareness': '#c4bd97','Leadership / Teamwork': '#d99694',Communication: '#c3d69b','PB. Solving / Decision Making': '#b3a2c7'
  };

事件处理程序 onChange 和生命周期钩子 ngOnit 只调用 calcTableData：

  ngOnInit(): void {
    this.calcTableData();
  }

  onChange(e: Event) {
    this.calcTableData();
  }

更新Stackblitz

哦，如果你能改变你的数据结构，请这样做。

export interface Attempt {
  grade: number;
  note: string;
}

export interface Activity {
  name: string;
  attempts: Attempt[];
}

// in use
let activities: Activity[] = [
  {
    name: 'Power',attempts: [
      { grade: 3.5,note: 'Could do better' },{ grade: 4.5,note: 'Better' },{ grade: 5,note: 'Passed' },]
  },{
    name: '',// etc…
  }
]

行分组的问题仍然存在，但像这样的结构将更容易管理。