Как показать div построчно - шаблон Angular

Question

У меня есть угловой шаблон, отображающий строки. Я добавил кнопку для отображения информации о текущей строке. Проблема в том, что когда я нажимаю на кнопку 1, информация показывается по всем строкам.

Я поместил здесь небольшой фрагмент кода, воспроизводящего мою проблему

https://stackblitz.com/edit/angular-nmhrty

Заранее спасибо!

Answer 1

Это пример решения:

компонент:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  item1: {info: string, show: boolean} = {info:'item 1 - info', show: false};
  item2: {info: string, show: boolean} = {info:'item 2 -info', show: false};
  items = [this.item1, this.item2];

  toggleDocuments(item: {info: string, show: boolean}){
        item.show = ! item.show;
    }

}

шаблон:

<div *ngFor="let test of items" >
  <div class="resultRow newRow" [class.resultRow-mobile]="mobileMode">
        <div *ngIf="!mobileMode" class="expandThis">
            <span (click)="toggleDocuments(test)">CLICK</span>
        </div>
        <ng-container *ngIf="test.show">
            <p>{{test.info}}</p>
        </ng-container>
  </div>
</div>

Answer 2

Попробуйте это:

<div *ngFor="let test of items; index as i" >
  <div class="resultRow newRow" [class.resultRow-mobile]="mobileMode">
        <div *ngIf="!mobileMode" class="expandThis">
            <span (click)="toggleDocuments(i)">CLICK</span>
        </div>
        <ng-container *ngIf="visibleDocuments[i]">
            <p>OK</p>
        </ng-container>
  </div>
</div>

компонент

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  show:boolean = false;
  items:any[] = ['1', '2'];
  visibleDocuments = new Array(this.items.length);

  toggleDocuments(index){
        this.visibleDocuments[index] = !this.visibleDocuments[index];
    }

}

Ссылка на StackBlitz

Answer 3

Я раздвоил ваш фрагмент и обновил его так, как вам кажется:

https://stackblitz.com/edit/angular-gt3jmk

Я предлагаю вам сохранять состояние показа / не показа в каждом элементе, который вы хотите отобразить. Таким образом, вы можете переключать видимость каждого в отдельности. Вы можете сделать это, добавив свойство show к каждому элементу в дополнение к его данным.

Answer 4

Каким-то образом вам нужно контролировать, какую кнопку вы нажимали, я помещаю эту информацию в де-массив, надеюсь, она вам поможет:

https://stackblitz.com/edit/angular-bawglg?file=src/app/app.component.ts