Question

我有一个项目列表。列表中的每一行都显示名称，日期等。每行下面是另一个元素.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>

component.ts

showMe: string = false;

showPanel(id:number){
  this.showMe = true;
  //get additional detail from server
}

点击后，所有.panel个元素都会显示，我只想显示直接位于该行下方的元素。在jquery中，我会在点击时执行此操作：

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

有没有办法在angular2中做类似的事情？

Answer 1

您正在做什么，每个 ngIf 都会这样，所有元素都会同时显示或隐藏。

只需添加适当的属性（对象属性）即可显示＆amp;隐藏元素。

DEMO：https://plnkr.co/edit/h4TYyiFwhoZBej0sUXDK?p=preview

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

通过将对象作为一个整体传递来实现click事件，

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


showPanel(item){
    item.showMe=!item.showMe;
    // do whatever you want to do.
}

Answer 2

您将传递给showPanel（）方法的ID完全标记。唐＆＃39;吨。不是使用每个项目使用的全局布尔值，而是存储要显示的项目的ID（如果只显示一个），或者更改扩展项目的布尔属性（如果可以同时扩展多个项目）。 / p>

showPanel(item) {
  this.expandedPanel = panel;

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

在视图中，使用

*ngIf="item === expandedItem"

或

*ngIf="item.expanded"

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

2 个答案: