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

Angular2 - *ngIf : How to show a specific element?

本文关键字：显示 元素 ngIf 何显示 Angular2-      更新时间：2023-09-26

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

我会这样更新测试：

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

与"点击显示"块相同：

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

我认为它可以更简单：

<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属性。

相关文章：