Question

我有使用ngFor创建的动态列表。当我点击项目时，我想用新的动态列表展开它，但仅限于该项目。在我的下面的代码中，它消耗了第一个列表中的每个项目。我理解为什么会这样，但我没有想法如何解决它。

这是我的代码

 <ul *ngFor="let p of portList">
    <li  (click)="setONUList(p.name)" id="{{ p.name }}"><img src="app/resources/{{ p['oper-status'] }}.png" class="myimage"/>{{ p.name}}</li>
        <ol *ngFor="let onu of portONUList">
        <li><img src="app/resources/{{ onu['oper-status'] }}.png" class="myimage" />{{ onu.name}}</li>
      </ol>

  </ul>

任何想法如何解决这个问题都会非常有帮助。

Answer 1

根据我的理解，子阵列与所有项目相同，因此嵌套数组和外部数组之间没有关系。

我的建议实际上是在数组中添加一个新属性，例如expanded ...所以，例如你的外部数组看起来像：

portList = [{id:1,name:'one',expanded:false},{id:2,name:"two",expanded:false}];

然后你的HTML：

<ul *ngFor="let p of portList">
  <li (click)="expand(p)">{{ p.name}}</li>
  <div *ngIf="p.expanded">
    <ol *ngFor="let onu of portONUList">
      <li>{{ onu.name}}</li>
    </ol>
  </div>
</ul>

点击后，切换expanded属性：

expand(p: any) {
   p.expanded = !p.expanded;
}

当然，如果您想要一个“快速”解决方案，您可以依赖HTML5而不需要新属性：

<details *ngFor="let p of portList">
  <summary>{{p.name}}</summary>
    <ul *ngFor="let onu of portONUList">
      <li>{{ onu.name}}</li>
    </ul>
</details>

这是一个有两个选项的plunker。

Answer 2

父与子列表之间应该存在关联，列表应采用 json 格式。参考下面的代码

<ul>
        <li ng-repeat="item in parent" ng-click="showChilds(item)">
            <span>{{item.name}}</span>
            <ul>
                <li ng-repeat="subItem in item.subItems" ng-show="item.active">
                    <span>{{subItem.name}}</span>
                </li>
            </ul>
        </li>
    </ul>

示例JSON FORMAT

let parent= [
        {
            name: "Item1",
            subItems: [
                {name: "SubItem1"},
                {name: "SubItem2"}
            ]
        },
        {
            name: "Item2",
            subItems: [
                {name: "SubItem3"},
                {name: "SubItem4"},
                {name: "SubItem5"}
            ]
        },
        {
            name: "Item3",
            subItems: [
                {name: "SubItem6"}
            ]
        }
    ];

Angular 2动态可消耗嵌套列表

2 个答案: