как повторять кнопки (старт / стоп) l oop на основе списка массивов, используя angular

Question

<li *ngFor="let list of lists  "  class="fetch" id="name" >

    Name:{{list.name}}  <!-- This Name has the array values ex: j1, j2, j3 -->
   
    <button  style="font-size: 11px;border-radius: 8px;font-weight: bold;background-color: green;" 
    *ngIf="isCollapsed" id="name" (click)=" toggleCollapse()"> START</button> 
    <button style="font-size: 11px;border-radius: 8px;font-weight: bold;background-color: red;" 
     *ngIf="!isCollapsed" id="name" (click)=" toggleCollapse()">STOP</button>
</li>

Например: у меня есть приведенный выше список массивов, основанный на том, как я могу повторить эти кнопки запуска / остановки для каждого элемента.

если я запустил этот код, он покажет кнопку запуска / остановки для все элементы, кроме моего требования, - когда нажимаете start / Stop для определенного элемента (например, j1), тогда только j1 запускается, остается в таком же режиме ожидания.

может ли кто-нибудь помочь мне в этом же.

Answer 1

Вам просто нужно добавить еще один ngFor l oop в существующий?

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

Answer 2

Я не совсем понял вопрос, но вместо использования центрального флага isCollapsed попробуйте включить этот флаг в каждый элемент массива lists. Затем элементы могут быть настроены индивидуально.

Контроллер

export class AppComponent  {
  lists = [
    { name: 'j1', isCollapsed: true },
    { name: 'j2', isCollapsed: true },
    { name: 'j3', isCollapsed: true },
    { name: 'j4', isCollapsed: true }
  ];

  start(name) {
    console.log(`started ${name}!`);
  }

  stop(name) {
    console.log(`stopped ${name}!`);
  }
}

Шаблон

  Name: {{list.name}}
  
  
    {{ list.isCollapsed ? 'START' : 'STOP' }}
  


{{lists | json}}

Рабочий пример: Stackblitz

Answer 3

Похоже, что id для всех кнопок - это name, разве это не должно быть {{list.name}}? Это зависит от вашей функции toggleCollapse. Пожалуйста, заполните минимальный пример рабочего кода для правильного ответа.