Angular2 - * ngIf:如何显示特定元素?

时间:2016-05-09 11:59:48

标签: javascript angular

我愿意只使用 ngIf 显示特定元素;但是,出于某种原因,它不起作用。

问题:当我点击以仅显示特定元素时,所有其他元素都会显示出来!

代码:

HTML(元素来自异步请求)

<ion-col *ngFor="#finalFormat of elements">
<div *ngIf="currentElement">
<div>Show this element</div>
</div>
<div (click)="showThis(finalFormat.elementName)" *ngIf="!currentElement">CLICK TO SHOW</div></ion-col>

JS:

    showThis(element){
    if(this.currentElement === element){
      return;
    }
    this.currentElement = element;
    }

2 个答案:

答案 0 :(得分:1)

我会像这样更新测试:

<div *ngIf="currentElement === finalFormat.elementName">
  (...)
</div>

“点击显示”块相同:

<div (click)="showThis(finalFormat.elementName)" 
     *ngIf="!currentElement !== finalFormat.elementName">
  CLICK TO SHOW
</div>

答案 1 :(得分:0)

我认为它可以更简单:

<ion-col *ngFor="#finalFormat of elements">
  <div *ngIf="finalFormat.currentElement">
    <div>Show this element</div>
  </div>
  <div (click)="showThis(finalFormat)" *ngIf="!finalElement.currentElement">CLICK TO SHOW</div>
</ion-col>

并在控制器中:

showThis(element) {
  element.currentElement = !element.currentElement;
}

因此,您基本上只需修改单个currentElement对象的finalFormat属性。