angular 2 - 树视图扩展所有节点如何使它只扩展子节点

Question

我有json文件如下

{
    "transactions": [{
        "Transaction ref : 321916010424": {
            "request": [{
                "Field": "DE-000",
                "length": "004",
                "value": "0100"
            }, {
                "Field": "DE-001",
                "length": "016",
                "value": "11110010 00111100 01000100 10000001 10001000 11100001 10000000 00001000                       00000000 00000000 00000000 00000000 00000000 00000000 00000001 11000000 "
            }],
            "response": [{
                "Field": "DE-000",
                "length": "004",
                "value": "0110"
            }, {
                "Field": "DE-001",
                "length": "008",
                "value": "00110010 00111010 00000000 00000000 00001110 11000001 10000000 00000010 "
            }, {
                "Field": "DE-003",
                "length": "006",
                "value": "003000"
            }]
        }
    }, {
        "Transaction ref : 000463000046": {
            "request": [{
                "Field": "DE-000",
                "length": "004",
                "value": "0100"
            }, {
                "Field": "DE-001",
                "length": "016",
                "value": "11110010 00111100 01000100 10000001 10101000 11100001 10000010 00001000                       00000000 00000000 00000000 00000000 00000000 00000000 00000001 00000000 "
            }],
            "response": [{
                "Field": "DE-000",
                "length": "004",
                "value": "0110"
            }, {
                "Field": "DE-001",
                "length": "008",
                "value": "00110010 00111010 00000000 00000000 00001110 11000001 10000000 00000010 "
            }, {
                "Field": "DE-063",
                "length": "009",
                "value": "AMXHZGWJ7"
            }]
        }
    }]
}

我的html文件是

<ul  style="border: none" class="list-unstyled">
  <li *ngFor="let a of acquirer_response | keys ">
    <ul class="list-unstyled" >
      <li *ngFor="let b of a.value | keys ">
        <ul class="list-unstyled">
          <li *ngFor="let c of b.value | keys " class="list-group">
            <strong  (click)="isCollapsedContent = !isCollapsedContent">
              <span class="glyphicon glyphicon-plus-sign"></span>
              {{c.key}}</strong>

            <ul class="list-unstyled" *ngIf="isCollapsedContent">
              <li *ngFor="let d of c.value | keys " class ="list-group-item list-group-item-info" (click)="isCollapsedContent = !isCollapsedContent"  >
                <strong>
                  <span class="glyphicon glyphicon-plus-sign"></span>
                  {{d.key}}</strong>

                <ul class="list-unstyled" *ngIf="isCollapsedContent">
                  <li *ngFor="let e of d.value | keys " class ="list-group-item list-group-item-info">
                    <ul class="list-unstyled" (click)="isCollapsedContent = !isCollapsedContent" >
                      <li *ngFor="let f of e.value | keys " class ="list-group-item list-group-item-info"  >
                        {{f.value}}
                    </ul>

                  </li>
                </ul>

              </li>
            </ul>

          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>



import {Directive, Input, HostBinding} from '@angular/core';


@Directive({selector: '[collapse]'})
export class Collapse {
  // style
  @HostBinding('style.height')
  private height:string;
  // shown
  @HostBinding('class.in')
  @HostBinding('attr.aria-expanded')
  private isExpanded:boolean = true;
  // hidden
  @HostBinding('attr.aria-hidden')
  private isCollapsed:boolean = false;
  // stale state
  @HostBinding('class.collapse')
  private isCollapse:boolean = true;
  // animation state
  @HostBinding('class.collapsing')
  private isCollapsing:boolean = false;

  @Input()
  private set collapse(value:boolean) {
    this.isExpanded = value;
    this.toggle();
  }

  private get collapse():boolean {
    return this.isExpanded;
  }

  constructor() {
  }

  toggle() {
    if (this.isExpanded) {


      this.hide();
    } else {
      this.show();
    }
  }

  hide() {
    this.isCollapse = false;
    this.isCollapsing = true;

    this.isExpanded = false;
    this.isCollapsed = true;
    setTimeout(() => {
      this.height = '0';
      this.isCollapse = true;
      this.isCollapsing = false;
    }, 4);
  }

  show() {
    this.isCollapse = false;
    this.isCollapsing = true;

    this.isExpanded = true;
    this.isCollapsed = false;
    setTimeout(() => {
      this.height = 'auto';

      this.isCollapse = true;
      this.isCollapsing = false;
    }, 4);
  }
}

现在我按照预期得到了树结构

+ Transaction ref : 321916010424

+ Transaction ref : 000463000046

但是当我点击+ Transaction ref：321916010424时，它会展开所有项目，包括下一个交易参考项目和子节点。当我尝试扩展子节点时也会发生同样的情况。请帮助如何限制特定节点的展开和折叠。

折叠组件文件

import {Directive, Input, HostBinding} from '@angular/core';


@Directive({selector: '[collapse]'})
export class Collapse {
  // style
  @HostBinding('style.height')
  private height:string;
  // shown
  @HostBinding('class.in')
  @HostBinding('attr.aria-expanded')
  private isExpanded:boolean = true;
  // hidden
  @HostBinding('attr.aria-hidden')
  private isCollapsed:boolean = false;
  // stale state
  @HostBinding('class.collapse')
  private isCollapse:boolean = true;
  // animation state
  @HostBinding('class.collapsing')
  private isCollapsing:boolean = false;

  @Input()
  private set collapse(value:boolean) {
    this.isExpanded = value;
    this.toggle();
  }

  private get collapse():boolean {
    return this.isExpanded;
  }

  constructor() {
  }

  toggle() {
    if (this.isExpanded) {


      this.hide();
    } else {
      this.show();
    }
  }

  hide() {
    this.isCollapse = false;
    this.isCollapsing = true;

    this.isExpanded = false;
    this.isCollapsed = true;
    setTimeout(() => {
      this.height = '0';
      this.isCollapse = true;
      this.isCollapsing = false;
    }, 4);
  }

  show() {
    this.isCollapse = false;
    this.isCollapsing = true;

    this.isExpanded = true;
    this.isCollapsed = false;
    setTimeout(() => {
      this.height = 'auto';

      this.isCollapse = true;
      this.isCollapsing = false;
    }, 4);
  }
}

Answer 1

所有节点扩展的原因是您有一个公共变量（'isCollapsedContent'）来指示它是否已折叠。如果您需要“全部展开/全部折叠”按钮，此逻辑适用。

解决方案的补救措施是为每个节点设置一个'isCollapsedContent'属性。因此，基于点击，它们仅切换单击的节点。

Answer 2

终于通过修改html实现了我想要的结果。如果有兴趣请看下面，如果你看到我现有的和这个修改过的HTML，你可以知道我改变了什么

    <ul class="list-unstyled">
  <li *ngFor="let t of acquirer_response | keys">
    <ul class="list-unstyled"  class="list-group" >
      <li *ngFor="let b of t.value | keys ">
        <ul class="list-unstyled"  >
          <span class="glyphicon glyphicon-plus-sign" (click)="t.isCollapsedContent =!t.isCollapsedContent"></span> {{b.key}}
          <div *ngIf="t.isCollapsedContent">
            <li *ngFor="let c of b.value | keys ">
              <div *ngIf="c.key == 'request'"  style="border: none">
                <ul  class="list-unstyled"  class="list-group-item list-group-item-info">
                  <strong  class="list-group-item list-group-item-info" style="border: none" (click)="c.value.isCollapsedContent =!c.value.isCollapsedContent" >
                    <span class="glyphicon glyphicon-plus-sign"  ></span>{{c.key}}{{c.value.isCollapsedContent }}
                  </strong>
                  <div  *ngIf="c.value.isCollapsedContent">
                    <li *ngFor="let d of c.value | keys" class="list-group-item list-group-item-info">
                      <ul class="list-unstyled" >
                        <li *ngFor="let e of d.value | keys"  class="list-group-item list-group-item-info">
                          <td>{{e.key }}{{e.value}}</td>
                        </li>
                      </ul>
                    </li>
                  </div>
                </ul>
              </div>
              <div *ngIf="c.key == 'response'">
                <ul  class="list-unstyled"  class="list-group-item list-group-item-info">
                  <strong  class="list-group-item list-group-item-info" style="border: none" (click)="c.value.isCollapsedContent =!c.value.isCollapsedContent">
                    <span class="glyphicon glyphicon-plus-sign"></span>Response Response</strong>
                  <div  *ngIf="c.value.isCollapsedContent">
                    <li *ngFor="let d of c.value | keys" class="list-group-item list-group-item-info">
                      <ul class="list-unstyled" >
                        <li *ngFor="let e of d.value | keys"  class="list-group-item list-group-item-info">
                          <td>{{e.key }}{{e.value}}</td>
                        </li>
                      </ul>
                    </li>
                  </div>
                </ul>
              </div>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </li>
</ul>