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

【问题标题】：Angular 13 tree Ng For Loop Not working ProperlyAngular 13 树 Ng For 循环无法正常工作
【发布时间】：2022-11-14 03:53:05
【问题描述】：

角树循环不起作用，这是我尝试使用的代码示例。我是否需要在我的代码中编写其他任何内容才能使其正常工作？请帮我解决这个问题。谢谢你。

我的 HTML 代码

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

我的 Ts 代码如下

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,
    }));
  }
}

下图将是预期的结果

这是我的 Stackblitz 代码

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

在 stackblitz 代码示例 1 中显示了正确的工作方式，但循环无法正常工作

在示例 2 中，当我们放在详细信息选项卡之外时，编码是循环的

帮我解决循环中的这个问题

【问题讨论】：

你的 for 循环中到底有什么不工作？ dataFormated 是一个长度为 9 的数组，恰好呈现了 9 个 div。其中 7 个是空的，因此不可见。
当您看到第一个示例时，div 没有循环 20 和 21 @FabianStrathaus
当您说“循环”时，我假设您的意思是没有显示这些，对吗？为什么要显示它们？除了显示的两个元素之外的所有其他元素都具有属性rowspan: -1。这意味着以下代码导致 div 没有任何内容：*ngIf="job.rowspan != -1"
s 但 *ngIf="job.rowspan1 != -2" 不起作用，我尝试了很多，我真的不知道发生了什么。请更改示例 1 的代码，因为它的工作方式类似于所需的输出图片。在此先感谢@FabianStrathaus

标签： angular ngfor angular-ng-if angular13 angular-loopback

【解决方案1】：

这是您的代码的简化版本：

示例1

这意味着if(con1 && cond2)

例子2

这意味着if(cond1 || cond2)。

所以，rowspan = -1, value = 20：

示例 1：rowspan != -1 && rowspan != -2。
示例 2：rowspan != -1 || rowspan != -2。

希望解释清楚。

【讨论】：