Не удается применить имя CSS динамически с асинхронным каналом

Question

У меня есть такой компонент:

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

import { Job } from '../models';
import { PipelineJobsQuery, PipelineSelectQuery } from '../queries';
import { PipelineJobsService } from '../services';

@Component({
  selector: 'pi-pipeline-jobs',
  templateUrl: './pipeline-jobs.component.html',
  styleUrls: ['./pipeline-jobs.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PipelineJobsComponent implements OnInit {
  public pipelineName: string;
  public pipelineJobs$: Observable<Job[]>;

  constructor(
    private readonly pipelineJobsQuery: PipelineJobsQuery,
    private readonly pipelineJobsService: PipelineJobsService,
    private readonly pipelineSelectQuery: PipelineSelectQuery
  ) {}

  public getJobStatus(job: Job): string {
    const status: string = job.next_build
      ? job.next_build.status
      : job.finished_build
        ? job.finished_build.status
        : 'no-build-status';

    console.log(job, status);
    return status;
  }

  public ngOnInit() {
    // Reload the pipelineJobs when the selectedPipeline changes
    this.pipelineSelectQuery.selectedPipeline$.subscribe(pipeline => {
      this.pipelineJobsService.getPipelineJobs(pipeline);
      this.pipelineJobs$ = this.pipelineJobsQuery.pipelineJobs;
      this.pipelineName = pipeline;
    });
  }
}

со следующим шаблоном:

<mat-card *ngFor="let job of (pipelineJobs$ | async)"
          class="job-card job-card-{{ getJobStatus(job) }}">
    {{job.name}} - <strong>{{getJobStatus(job)}}</strong>
</mat-card>

и таблицей стилей:

.job-card {
  margin: 8px;
}

.job-card-succeeded {
  background-color: green;
}

Если я применяю классЕсли имя будет таким, то шаблон не отображает элементы mat-card как карты.Я знаю, что данные есть в то время, когда вызывается функция getJobStatus(), поэтому я не уверен, почему это нарушает CSS для карт.Вот как это должно выглядеть:

Вот как это выглядит в итоге:

Есть идеи, как с этим справиться?

Answer 1

Поскольку вы привязываетесь к class, вы переопределяете все классы, примененные к mat-card самим компонентом, в частности, mat-card, поэтому он больше не выглядит как карта.Не привязывайтесь к class, вместо этого используйте ngClass, который предназначен для этой цели - добавление классов вместо установка классов:

<mat-card *ngFor="let job of (pipelineJobs$ | async)"
        [ngClass]="'job-card job-card-' + getJobStatus(job)">
    {{job.name}} - <strong>{{getJobStatus(job)}}</strong>
</mat-card>