How to find relation between table header (th) and td in a row in HTML (angular 5)?

Question

I have checked SO post1 and SO post2 but that is done by jquery and javascrip. but I want to do this inside html itself

My object structure is like

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')
                ])
    ];

My 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>

Here i want check for the date and want to display marks in the corresponding cell. I am not that familiar with html as i am from WPF background. Please suggest me alternative design to display my object in table format as per given below image.

Hardik Patel · Answer 1 · 2018-12-05T11:52:13.240

0

You can update your html code as below. And it will work as you want.

<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>

edited Dec 05 '18 at 11:52

answered Dec 05 '18 at 11:43

Hardik Patel

3,868
1
23
37

I have given this just an example. In my case subjects are also dynamic. Here in your code "j==0" is given because of that subject will be taken from resultDetails at index 0 but Bio subject is not there so it simply puts marks of bio in chemistry column – Mohini Mhetre Dec 06 '18 at 01:42
1

In you case data is not predictable. So i guess it's not possible to implement using HTML only. you have to write some code in compoment.ts file to know how many subjects are there. – Hardik Patel Dec 06 '18 at 08:30
Yeah i have done changes in type script file such that it would be easy to print data in html and its working. Thank you ☺ – Mohini Mhetre Dec 06 '18 at 13:50

score 0 · Answer 2 · answered Dec 05 '18 at 14:48

Sorry I was not able to attach a link but below is the code. Let me know if it helps:

 //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;
        }

I can't hardcode subjects, in my case subjects are dynamic. – Mohini Mhetre Dec 06 '18 at 01:46 — Mohini Mhetre, Dec 06 '18 at 01:46

How to find relation between table header (th) and td in a row in HTML (angular 5)?

2 Answers2