根据响应属性Angular更改背景颜色

Question

我从 API 请求数据，然后我得到响应对象，所以使用*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 { }

Please, see the example at 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>