одна активная кнопка в ngFor угловой - PullRequest
Новая
       9

одна активная кнопка в ngFor угловой

0 голосов
/ 17 октября 2018

У меня есть запрос относительно активной кнопки в угловых.Сценарий: среди списка приложений, если пользователь выбирает одно приложение и нажимает «Открыть канал», остальные должны быть деактивированы.Пожалуйста, посмотрите в мой HTML 

   <mat-expansion-panel *ngFor="let a of apps">
    <mat-expansion-panel-header>

      <mat-panel-title>
        {{a.name}}
      </mat-panel-title>

      <mat-panel-description>
        {{a.info}}
      </mat-panel-description>

      <mat-panel-description>
        <button mat-raised-button color="primary" (click)="clickedConnect(a.name, a._id)">Open Channel</button>

      </mat-panel-description>

      <mat-panel-description>
        <button mat-raised-button color="primary" (click)="clickedDisconnect(a._id)">Close Channel</button>
      </mat-panel-description>

      <mat-panel-description>
        <mat-chip-list>

          <mat-chip *ngIf="isAppActive(a._id)==true" style="background: green;" selected>Openned</mat-chip>
          <mat-chip *ngIf="isAppActive(a._id)==false" style="background: red;" selected>Closed</mat-chip>

        </mat-chip-list>**strong text**
      </mat-panel-description>

    </mat-expansion-panel-header>

  </mat-expansion-panel>

1 Ответ

0 голосов
/ 17 октября 2018
  1. создать переменную с именем selectedId
  2. При нажатии кнопки открытого канала назначить выбранный идентификатор приложения для selectedId .
  3. Сделайте selectedId пустым, если вы хотите включить все приложения. 
<ng-container *ngFor="let a of apps">
<mat-expansion-panel [disabled]="selectedId && a._id != selectedId ">
// rest of the content
</mat-expansion-panel>
</ng-container>

Надеюсь, это то, что вы просили.

...