Angular 13 树 Ng For 循环无法正常工作

Question

Angular tree Loop is not working, here's the sample of code I'm trying to use. Do I need to write anything else in my code, so that it will work? Please help me on this one. Thank you.

My HTML Code

<h1>Example 1</h1>

<div *ngFor="let job of dataFormated">
  <details class="tree-parent-cover" *ngIf="job.rowspan != -1" [attr.rowspan]="
  job.rowspan > 0 ? job.rowspan : null
">
    <summary>{{job.JobFamily}}

    </summary>
    <details class="tree-parent-inner-cover" *ngIf="job.rowspan1 != -2" [attr.rowspan]="
        job.rowspan1 > 0 ? job.rowspan1 : null
      ">
      <summary>{{job.MajorGroup}}
      </summary>
    </details>
  </details>

</div>



<h1>Example 2</h1>


<div *ngFor="let job of dataFormated">
  <details class="tree-parent-cover" *ngIf="job.rowspan != -1" [attr.rowspan]="
  job.rowspan > 0 ? job.rowspan : null
">
    <summary>{{job.JobFamily}}

    </summary>
       
  </details>

  <details class="tree-parent-inner-cover" *ngIf="job.rowspan1 != -2" [attr.rowspan]="
        job.rowspan1 > 0 ? job.rowspan1 : null
      ">
      <summary>{{job.MajorGroup}}
      </summary>
  </details>

</div>

My Ts Code As Below

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  allhirearchy = [
    {
      JobFamily: '1',
      MajorGroup: '19',
    },
    {
      JobFamily: '1',
      MajorGroup: '19',
    },
    {
      JobFamily: '1',
      MajorGroup: '20',
    },
    {
      JobFamily: '1',
      MajorGroup: '20',
    },
    {
      JobFamily: '1',
      MajorGroup: '21',
    },
    {
      JobFamily: '1',
      MajorGroup: '21',
    },
    {
      JobFamily: '2',
      MajorGroup: '30',
    },
    {
      JobFamily: '2',
      MajorGroup: '30',
    },
    {
      JobFamily: '2',
      MajorGroup: '31',
    },
  ];

  dataFormated: any;

  ngOnInit() {
    this.hierarchy();
  }

  hierarchy() {
    this.dataFormated = this.allhirearchy.map((x: any, i: any) => ({
      ...x,
      rowspan:
        i == 0 || this.allhirearchy[i - 1].JobFamily != x.JobFamily
          ? this.allhirearchy.filter((f: any) => f.JobFamily == x.JobFamily)
              .length
          : -1,
      rowspan1:
        i == 0 || this.allhirearchy[i - 1].MajorGroup != x.MajorGroup
          ? this.allhirearchy.filter((f: any) => f.MajorGroup == x.MajorGroup)
              .length
          : -2,
    }));
  }
}

the below picture will be the expected result

this is my Stackblitz Code

https://stackblitz.com/edit/angular-zgn6se?file=src%2Fapp%2Fapp.component.html

In the stackblitz code example 1 show the correct way of working but the loop is not working properly

in the example 2 the coding is looping while we put outside of the details tab

help me out to solve this issue in looping

Answer 1

Here is the simplified version of your code:

• Exmaple1
  

This means if(con1 && cond2)

• Exmaple2
  

This means if(cond1 || cond2) .

So, with rowspan = -1, value = 20 :

• With example1: rowspan != -1 && rowspan != -2 evaluates to false.
• With example2: rowspan != -1 || rowspan != -2 rowspan != -1 || rowspan != -2 evaluates to true.

Hope the explanation is clear.