Блог

У меня есть карта с циклом ngFor, поэтому можно создать так много карт, и внутри каждой карты у меня есть кнопка, при нажатии кнопки я открываю div внутри этой карты. Но в настоящее время при нажатии кнопки div открывается на каждой карте, поскольку она находится в цикле. Как это исправить

Поддерживайте правильные идентификаторы для каждого div внутри цикла foreach, чтобы он правильно расширялся и сворачивался, для справки ниже приведен пример кода html и typescript.

—.html

 <div class="row" *ngFor="let item of itemList;let i=index;">
    <div class="col">
      <div class="row bg-light" (click)="onClick(item,i,item.collapsed)"
        [attr.aria-expanded]="item.collapsed" aria-controls="item.name">
           <div class="col background-grey">
             <label>{{item.name}}</label>
           </div>
     </div>

    <div id="{{item.name}}" [collapse]="item.collapsed" [isAnimated]="true" class="container">
    // content goes here
    </div>
</div>
  

—.ts

 itemList = [];

ngOnInit() {
 for(let i=0;i<5;i  ){
    const objItem = {name:'name' i,collapsed:true};
    this.itemList.push(objItem);
  }
}

onClick(item,index,collapsed){
   this.itemList[index].collapsed = !collapsed;
}