Question

我有一段简单的代码，比如

<ul>
  <li *ngFor="let item of list">
    <div class="button">Click to show text</div>
    <div class="text">hello</div
  </li>
</ul>

我想创建并为每个hello div分配一个局部变量isVisible，这样当你单击.button时，只会显示一个文本div。我试着这样做

<ul>
  <li *ngFor="let item of list">
    <div class="button" (click)="isVisible ? isVisible = false : isVisible = true">Click to show text</div>
    <div *ngIf="isVisible" class="text">hello</div
  </li>
</ul>

但是当点击.button时，会显示每个单独的.text div。有没有类似的方法做到这一点？

我知道有一种方法可以通过在我显示之前为每个项目分配一个额外的isVisible布尔值来实现这一点，但我目前正在寻找其他方法。

Answer 1

你不能在html代码上有一个临时变量，而是我会在组件上有一个变量，比如currentItemIndex，如下所示：

@Component()
export class SomeComponent {
    currentItemIndex: number;
    onClick(itemIndex) {
        this.currentItemIndex = itemIndex;
    }
}

在组件html中：

<ul>
  <li *ngFor="let item of list; let i = index">
   <div class="button" (click)="onClick(i)">Click to show text</div>
    <div *ngIf="currentItemIndex === i" class="text">hello</div>
  </li>
</ul>

希望这有帮助。

Answer 2

如果您希望一次只能显示一个项目但是如果您希望多个项目可见则失败，为了实现多个项目可见，您可以在您要重复的对象上设置属性：

<ul>
  <li *ngFor="let item of list">
    <div class="button" (click)="item.isVisible ? item.isVisible = false : item.isVisible = true">Click to show text</div>
    <div *ngIf="item.isVisible" class="text">hello</div
  </li>
</ul>

这里的缺点是你在你可能不想要的对象上引入了一个新属性。为您创建一个包含该属性的新组件是一个更完整的解决方案，但根据具体情况可能过度。

Answer 3

<li *ngFor="let item of list; let i = index">
 <div class="button" (click)="setIndex(i); isVisible=!isVisible">Click to show 
  text</div>
 <div *ngIf="isVisible && (currentIndex === i)" class="text">hello</div
</li>

并在您的组件中

setIndex(index){
   this.currentIndex = index;
}

Answer 4

您可以创建一个负责点击的新组件。

新组件可以有一个 @Input 变量，该变量从ngIf获取项目并处理所有事情。

<ul>
  <li *ngIf="let item of list">
   <new_component [item]="item"></new_component>
  </li>
</ul>

新组件的模板

<div class="button" (click)="isVisible ? isVisible = false : isVisible = true">Click to show text</div>
<div *ngIf="isVisible" class="text">hello</div>

Angular2。一种为列表中的每个元素分配本地模板变量的方法

4 个答案: