Comment afficher les div ligne par ligne - Template Angular

D'une manière ou d'une autre, vous devez contrôler le bouton sur lequel vous avez cliqué, j'ai mis ces informations dans le tableau, j'espère que cela vous aidera:

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

Essayez ceci:

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];
    }

}

component

<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>

Lien StackBlitz

J'ai forké votre extrait de code et l'ai mis à jour avec ce que je pense que vous cherchez:

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

Je vous suggère de stocker l'état de show / not show dans chaque élément que vous souhaitez afficher. De cette façon, vous pouvez basculer la visibilité de chacun individuellement. Vous pouvez le faire en ajoutant une propriété show à chaque élément en plus de ses données.

Voici un exemple de solution:

component:

<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>

template:

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;
    }

}