Question

我想知道如何选择在使用angular * ngFor创建的HTML中显示/隐藏对象，而无需为每个对象手动实现布尔变量。

HTML：

<div *ngFor="let element of elementsArray">
    <button (click)="showElement()">{{element.name}}</button>
    <div *ngIf="showElementvar">
        Element1 data
    </div>
</div>

component.ts：

export class example{
    elementsArray:element[] = 
        [{name:'Element 1'},
        {name:'Element 1'},
        {name:'Element 1'}]
    showElementvar = false;
    showElement(){ 
        this.showElementvar = !this.showElementvar;
    }
}

这将使用按钮输出3个元素。当我点击按钮时，每个对象都会显示出来。当我再次点击它时，它会隐藏每个人中的一个。

我可以为每个变量和方法实现一个变量和方法，但我问这个问题，因为数组将来会增长，我无法找到一个解决方案，无需手动继续添加布尔值变量。

我想要的是每个元素的一个按钮，它隐藏一个div并使其余部分不受影响。

Answer 1

这是一个不需要更改元素数据结构的解决方案。

我将循环中的元素传递给showElement函数
当调用showElement时，它会检查该元素是否在一组名为elementsShowing的元素中。如果它在那里，它会删除该元素，如果没有，则添加它
回到模板中，我正在使用ngIf进行结果检查以查看该元素是否在集合中

HTML：

<div *ngFor="let element of elementsArray; let i = index">
  <button (click)="showElement(element)">{{element.name}}</button>
  <div *ngIf="elementsShowing.has(element)">
    Element Data
  </div>
</div>

component.ts

elementsShowing = new Set<Element>();
elementsArray: Element[]  =
  [
    {name: 'Element 1'},
    {name: 'Element 2'},
    {name: 'Element 3'}
  ]

showElement(element: Element) {
  if (this.elementsShowing.has(element)) {
    this.elementsShowing.delete(element);
  } else {
    this.elementsShowing.add(element);
  }
}

Answer 2

你想要这样的东西：

HTML：

<div *ngFor="let element of elementsArray">
    <button (click)="showElement(element)">{{element.name}}</button>
    <div *ngIf="element.visible">
    Element1 data
    </div>
</div>

component.ts

export class example{
elementsArray:element[] = 
    [{name:'Element 1', visible: true},
    {name:'Element 1', visible: true},
    {name:'Element 1', visible: true}]

    showElement(element){ 
        element.visible = !element.visible;
    }
}

Answer 3

以下是使用ANGULAR 6的简单解决方案

<div *ngFor=let item of items;let i=index">
    <div (click)="toogleItems(i)"> {{item.name}}} </div>
    <div *ngIf="ActivateIndex.includes(i)">
        someitem{{i}}
    </div>
</div>

MYDEMO.TS文件

ActivateIndex: number[] =[];

items = SomeClass[] =[{name:'rohit'},{name:'koli'}]     


toogleItems(index){
    console.log(index);

    if(this.ActivateIndex.includes(index)){
       this.ActivateIndex=this.ActivateIndex.filter(item =>item !== index);
       console.log(this.ActivateIndex);
    }
   else{
      this.ActivateIndex.push(index);
      console.log(this.ActivateIndex);
   }
}


export SomeClass{
   name:string;
}

如何为使用* ngFor创建的对象单独切换视觉？

3 个答案: