Angular2 - *ngIf：如何顯示特定元素？

Question

我願意使用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;
    }

Answer 1

我會像這樣更新測試：

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

與“單擊顯示”塊相同：

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

Answer 2

我認為它可以更簡單：

<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;
}

所以你基本上只是修改單個finalFormat對象的currentElement屬性。