Angular 2$this.parent（）.next（）.show（）单击

我有一份物品清单。列表中的每一行都显示名称、日期等。每一行下面是另一个元素

。panel

，只有在单击“展开”元素时才会显示该元素。这就是我目前所拥有的

component.html

<div *ngFor="let item of items">
  <div>
    <div>{{item...}}</div>
    <div (click)="showPanel(item.id)>expand</div>
    <div>{{item...}}</div>
  </div>
  <div class='panel' *ngIf="showMe">returned info from server</div>
</div>

单击所有

。面板将显示
元素，我只想显示行正下方的元素。在jquery中，我会在单击时执行此操作：

$this.parent().next().show();

有没有办法在angular2中做类似的事情？
你在做什么，这样每个
ngIf都会工作，所以所有元素都会同时显示或隐藏

showPanel(item) {
  this.expandedPanel = panel;

  // or, if multiple panels can be expanded:
  // item.expanded = true;
}

只需添加适当的属性（对象属性）来显示和隐藏元素

演示：


{{item…}}
展开//您正在做的事情，这样每个
ngIf都可以工作，以便同时显示或隐藏所有元素

showPanel(item) {
  this.expandedPanel = panel;

  // or, if multiple panels can be expanded:
  // item.expanded = true;
}

只需添加适当的属性（对象属性）来显示和隐藏元素

演示：


{{item…}}
展开//您将完全忽略传递给showPanel（）方法的ID。不要。与其使用每个项使用的全局布尔值，不如存储要显示的项的ID（如果只能显示一个），或者更改扩展项的布尔值属性（如果可以同时扩展多个项）

在视图中，使用

*ngIf="item === expandedItem"

或

您正在完全忽略传递给showPanel（）方法的ID。不要。与其使用每个项使用的全局布尔值，不如存储要显示的项的ID（如果只能显示一个），或者更改扩展项的布尔值属性（如果可以同时扩展多个项）

在视图中，使用

*ngIf="item === expandedItem"

或

这是可行的，但如果我想在单击事件中将
item.id
传递给
showPanel（item.id）
方法，该怎么办？如图所示，您不需要使用typescript函数。我的意思是根本不需要校准任何
showPanel
功能。它自己用HTML处理它。我更新了plunker。也许我遗漏了什么，但我的索引API响应的数据集有限，当我单击展开时，我想获取项目及其关联模型的完整数据集。这可能是该项的图像以及来自API后端的其他关联数据，因此单独点击
show
操作如果您使用的是模型，请确保添加默认值为false的
showMe
属性。我部分理解你的问题，但不完全理解。但让我向你们展示一下如何使用函数也能做到这一点。更新答案。好的，效果很好。。。谢谢，现在就要和angular2打交道了。最后一件事，我该如何使展示面板具有排他性？i、 e.当您单击展开第二个时，第一个会消失？这是可行的，但是如果我想在单击事件中将
item.id
传递到
showPanel（item.id）
方法，该怎么办？如图所示，您不需要typescript函数。我的意思是根本不需要校准任何
showPanel
功能。它自己用HTML处理它。我更新了plunker。也许我遗漏了什么，但我的索引API响应的数据集有限，当我单击展开时，我想获取项目及其关联模型的完整数据集。这可能是该项的图像以及来自API后端的其他关联数据，因此单独点击
show
操作如果您使用的是模型，请确保添加默认值为false的
showMe
属性。我部分理解你的问题，但不完全理解。但让我向你们展示一下如何使用函数也能做到这一点。更新答案。好的，效果很好。。。谢谢，现在就要和angular2打交道了。最后一件事，我该如何使展示面板具有排他性？i、 e.当您单击展开第二个时，第一个会消失吗？
*ngIf="item === expandedItem"

*ngIf="item.expanded"