如何在 HTML（角度 5）中连续查找表头（th）和 td 之间的关系？

Question

我检查了SO post1 和SO post2，但这是由 jquery 和 javascrip 完成的。但我想在 html 本身中执行此操作

我的对象结构是这样的

this.resultDetails = [
      new resultDetail(new Date('11/26/2018'), [
                 new scoreDetail('physics', '20'),
                 new scoreDetail('chemistry', '15')
                 ]),
      new resultDetail(new Date('10/12/2018'), [
                new scoreDetail('physics', '25'),
                new scoreDetail('chemistry', '20')
                ]),
      new resultDetail(new Date('7/1/2018'), [
                new scoreDetail('physics', '30'),
                new scoreDetail('Bio', '11')
                ])
    ];

我的html

<div>
<table thTable>
    <tr>
      <th>
        Analysis
      </th>
      <th *ngFor="let r of resultDetails">
        {{r.resultDate}}
      </th>
    </tr>
    <ng-container *ngFor="let r of resultDetails">
      <tr *ngFor="let s of r.scoreDetails">
          <td>{{s.subjectName}}</td>
          <td *ngIf="r.resultDate == ??">{{s.marks}}</td>
      </tr>
    </ng-container>
  </table>
</div>

在这里我想检查日期并想在相应的单元格中显示标记。我对 html 并不熟悉，因为我来自 WPF 背景。请建议我替代设计，以按照下图以表格格式显示我的对象。

Answer 1

您可以如下更新您的 html 代码。它会按照你的意愿工作。

<div>
<table thTable>
    <tr>
        <th>
            Analysis
        </th>
        <th *ngFor="let r of resultDetails">
            {{r.resultDate}}
        </th>
    </tr>

    <ng-container *ngFor="let r of resultDetails;let j = index">
        <tr *ngFor="let s of r.scoreDetails;let i = index">
            <ng-container *ngIf="j==0">
                <td>{{s.subjectName}}</td>
                <ng-container *ngFor="let r1 of resultDetails">
                    <td>{{r1.scoreDetails[i].marks}}</td>
                </ng-container>
            </ng-container>
        </tr>
    </ng-container>
</table>

Answer 2

抱歉，我无法附上链接，但下面是代码。如果有帮助，请告诉我：

 //HTML 
 <div class="row">
          <table class="table" border="1">
            <thead>
              <tr>
                <th>Subject</th>
                <th *ngFor="let r of resultDetails">{{r.date | date:medium}}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Physics</td>
                <ng-container *ngFor="let r of resultDetails"> 
                <td *ngFor="let s of r.scoreDetail" [ngClass] = "{'prop' : s.name !== 'physics'}"> 
                  <span>{{s.marks}}</span>
                </td>
              </ng-container>
              </tr>
              <tr>
                <td>Chemistry</td>
                <ng-container *ngFor="let r of resultDetails"> 
                <td *ngFor="let s of r.scoreDetail" [ngClass] = "{'prop' : s.name !== 'chemistry'}"> 
                  <span>{{s.marks}}</span>
                </td>
              </ng-container>
              </tr>
            </tbody>
          </table>
        </div>

        //Typescript file
        import { Component, OnInit } from '@angular/core';
        import { resultDetail } from './result.details';
        import { scoreDetail } from './score.detail';

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


          resultDetails : resultDetail[] = [
            new resultDetail(new Date('11/26/2018'), [
                       new scoreDetail('physics', '20'),
                       new scoreDetail('chemistry', '15')
                       ]),
            new resultDetail(new Date('10/12/2018'), [
                      new scoreDetail('physics', '80'),
                      new scoreDetail('chemistry', '10')
                      ]),
            new resultDetail(new Date('7/1/2018'), [
                      new scoreDetail('physics', '30'),
                      new scoreDetail('chemistry', '2')
                      ])
          ];


          constructor() {
           }

          ngOnInit() {
          console.log("*****" +this.resultDetails);
          }

        }

        //model file
        import { scoreDetail } from "./score.detail";

        export class resultDetail {
            date: Date;
            scoreDetail: scoreDetail[];

            constructor(date : Date, scoreDetail : scoreDetail[]) {
                this.date  = date;
                this.scoreDetail = scoreDetail;
            }

        }

        //model file
        export class scoreDetail {
            name: string;
            marks: string;

            constructor(name : string, marks: string) {
                this.name = name;
                this.marks = marks;
            }
        }

        //css
        .prop {
            display: none;
        }