Comment répéter les boutons (démarrage / arrêt) Boucle en fonction de la liste des matrices en utilisant angulaire

Avez-vous juste besoin d'ajouter une autre boucle NGFOR à l'intérieur de votre existant?

<li *ngFor="let list of lists  "  class="fetch" id="name" >
    Name:{{list.name}}  <!-- This Name has the array values ex: j1, j2, j3 -->
    <span *ngFor="let key of list?.name">
      <button *ngIf="isCollapsed" (click)="toggleCollapse()">{{key}} START</button> 
      <button *ngIf="!isCollapsed" (click)=" toggleCollapse()">{{key}} STOP</button>
    </span>
</li>

Je n'ai pas compris exactement la question, mais au lieu d'utiliser un drapeau central issollapsed code>, essayez d'inclure cet indicateur dans chaque élément de la liste LIST CODE> Array. Ensuite, les éléments pourraient être définis individuellement.

Contrôleur P>

<li *ngFor="let list of lists" class="fetch" id="name">
  Name: {{list.name}}
  
  <button 
    style="font-size: 11px;border-radius: 8px;font-weight: bold;background-color: green;" 
    id="name" 
    (click)="list.isCollapsed = !list.isCollapsed; list.isCollapsed ? stop(list.name) : start(list.name)"
  >
    {{ list.isCollapsed ? 'START' : 'STOP' }}
  </button>
</li>

<pre>{{lists | json}}</pre>