изменить цвет фона на основе атрибутов ответа Angular

Question

У меня был запрос данных от API, затем я получил ответ Object, поэтому с помощью *ngFor мне удалось отобразить некоторые данные, которые я хочу, проблема в том, что некоторые css должны быть реализованы на основепо атрибуту ответа, для моих данных, у меня был список банка и статуса.основанный на статусе атрибута Не в сети Мне нужно изменить цвет фона и мне нужно только показать Не в сети только статус. Мне удалось изменить цвет фона, вот что я пробовал:

html файл

<ul class="ul1">
  <li 
  [style.background]="getBackgroundColor(p.status)"
   class="li1" *ngFor="let p of myData?.paymentChannels">
  <span>{{p.name}}</span>
  <br>
  <span>{{p.status}}</span>
  </li>
</ul>

ts файл

  getBackgroundColor(status) {
    switch (status) {
      case 'Offline':
      return 'grey';
    }
  }

ожидаемый вывод :

также это моя демоверсия stackblitz , я мог бы использовать некоторые предложения, чтобы решить мою.

Answer 1

Я бы предложил что-то вроде этого:

<ul class="ul1">
  <li 
  [ngClass]="{offline: p.status == 'Offline'}"
   class="li1" *ngFor="let p of myData?.paymentChannels">
  <span>{{p.name}}</span>
  <br>
  <span> {{p.status == 'Offline' ? p.status : '&nbsp;'}}</span>
  </li>
</ul>

И добавить в css:

.offline {
  background-color: gray;
}

Answer 2

ваш код работает, но я думаю, что лучше без такой функции:

<ul class="ul1">
<li [style.background]="'grey' : p.status == 'Offline'" class="li1" 
*ngFor="let p of myData?.paymentChannels">
<span>{{p.name}}</span>
<br>
<span>{{p.status}}</span>
</li>
</ul>

Answer 3

До

<span>{{p.status}}</span>

После

<span>{{p.status === 'Offline' ? 'Offline' : '&nbsp;'}}</span>

Было бы еще лучше, если бы вы извлекли логику из метода вфайл TS.

Часть ' ' является заполнителем (пустым пространством), поэтому поле не сворачивается, но я бы порекомендовал добавить надлежащий стиль CSS, например, было бы достаточно добавить min-height: 36px; в класс .li1.

StackBlitz

Answer 4

Вы можете отфильтровать ваши данные, используя структурную директиву *ngIf, а затем применить стиль:

<ul
   *ngIf="myData?.paymentChannels" 
    class="ul1">
    <li 
       [style.background]="p?.status === 'Offline'? 'grey' : 'green'"
       class="li1" 
       *ngFor="let p of myData?.paymentChannels">

       <ng-container *ngIf="p?.status === 'Offline'">
           <span>{{p.name}}</span>
           <br>
           <span>{{p.status}}</span>
       </ng-container>
     </li>
</ul>

Если вы хотите фильтровать, а ваш массив данных небольшой, вы можете использовать директиву *ngIf.Однако было бы лучше использовать трубу фильтра:

<li *ngFor="let item of myData?.paymentChannels | yourFilter:filterargs">

и вашу трубу:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class YourFilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {
        if (!items || !filter) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.title.indexOf(filter.title) !== -1);
    }
}

, и вы должны включить свою трубу в app.module.ts:

import { YourFilterPipe } from './shared/pipes/your-filter.pipe';

@NgModule({
    imports: [
        ..
    ],
    declarations: [
        YourFilterPipe,
    ],
    providers: [
        ..
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Пожалуйста, посмотрите пример на stackblitz.com

ОБНОВЛЕНИЕ:

Если вы не хотите фильтровать данные, но скрыть статусoffline Вы можете использовать *ngIf структурную директиву:

<ul
   *ngIf="myData?.paymentChannels" 
    class="ul1">
    <li 
       [style.background]="p?.status === 'Offline'? 'grey' : 'green'"
       class="li1" 
       *ngFor="let p of myData?.paymentChannels">
           <span>{{p.name}}</span>
           <br>
           <span *ngIf="p?.status === 'Offline'; else empty">{{p.status}}</span>
           <ng-template #empty>$nbsp;</ng-template>
     </li>
</ul>