CODEWITHSUNDEEP
angularngforangular-ng-ifangular13angular-loopback
Rishf P
Rishf P

Reputation: 49

Angular 13 tree Ng For Loop Not working Properly

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

enter image description here

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

Upvotes: 0

Views: 299

Answers (1)

Jimmy
Jimmy

Reputation: 1429

Here is the simplified version of your code:

  • Exmaple1
    enter image description here

This means if(con1 && cond2)

  • Exmaple2
    enter image description here

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 evaluates to true.

Hope the explanation is clear.

Upvotes: 0

Related Questions