Изменить значок угловой материал, нажав - PullRequest
Новая
       4

Изменить значок угловой материал, нажав

0 голосов
/ 05 октября 2019

У меня есть таблица материалов, в которой есть столбец с именем status (см. Изображение). enter image description here

. Мне нужно щелкнуть значок материала, значокдолжен быть альтернативным в зависимости от значения, установленного из файла 'ts'. Я использую открытую переменную, чтобы изменить значок. Однако, поскольку я использую только одну переменную, эффект имеет место для всех строк. Более того, если я контролирую его с помощью идентификатора элемента, по которому щелкнули, предыдущие значения (значки), по которым был выполнен щелчок, заменяются старыми значениями (значки). Для вашей информации я показываю и сохраняю данные через наблюдаемый (API). Так что нет способа взять значение из API и сразу же показать его в списке. Ниже приведен код HTML и 'ts': 

onClick(event, row) {
  if (event.srcElement.innerText === 'panorama_fish_eye') {
      this.statusIconTextTrue = 'check_circle';
      taskStatus = 'FINISHED_COMPLETED';
      archived = true;
      timeFinishedActual = new Date().getTime();
    } else {
      this.statusIconTextTrue = 'panorama_fish_eye';
      taskStatus = 'CREATED';
      archived = false;
      timeFinishedActual = null;
    }
}

<mat-icon (click)="onClick($event, element)">
                  {{ statusIconID == element.taskuuid && statusIconTextTrue ? statusIconTextTrue : statusIconText  }}
                </mat-icon>

Я борюсь за пару дней, чтобы найти правильную логику, чтобы справиться с проблемой. Есть мысли по этому поводу или могут быть какие-то другие решения? Заранее спасибо.

1 Ответ

1 голос
/ 06 октября 2019

Ясир, используйте значение «статус». Нажмите только изменить статус, см. stackblitz 

<ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td (click)="element.status=!element.status" mat-cell *matCellDef="let element">
        <mat-icon>
            {{ element.status?'check_circle' : 'block'  }}
        </mat-icon>
    </td>
</ng-container>

Если «статус» не в данных, которые вы получили, вы можете добавить легко после подписки на услугу. Представьте, что у вас есть служба, которая возвращает массив данных с уникальной датой свойства, вы можете сделать что-то вроде 

dataService.subscribe((res:any)=>{
   res.forEach(x=>{
      x.status=false;
   })
   this.data=res
})

ПРИМЕЧАНИЕ: например, в статусе есть только два значения «истина» и «ложь»,это причина того, что щелчок становится таким простым, как (click)="element.status=!element.status" может иметь два значения: «конец» и «не окончен», тогда столбец становится похожим на 

<ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td (click)="element.status=element.status=='finish'?'unfinish':'finish'
        mat-cell *matCellDef="let element">
        <mat-icon>
            {{ element.status=='finish'?'check_circle' : 'block'  }}
        </mat-icon>
    </td>
</ng-container>
...