无法使用异步管道动态应用CSS名称

Question

我有一个像这样的组件：

enum class CheckPermissionResult {
    PermissionAsk,
    PermissionPreviouslyDenied,
    PermissionDisabled,
    PermissionGranted
}

typealias PermissionCheckCompletion = (CheckPermissionResult) -> Unit


object PermissionHandler {

    private fun shouldAskPermission(context: Context, permission: String): Boolean {
        return ContextCompat.checkSelfPermission(context,
                permission) != PackageManager.PERMISSION_GRANTED
    }

    fun checkPermission(context: Context, permission: String, completion: PermissionCheckCompletion) {
        // If permission is not granted
        if (shouldAskPermission(context, permission)) {
            //If permission denied previously
            if ((context as Activity).shouldShowRequestPermissionRationale(permission)) {
                completion(CheckPermissionResult.PermissionPreviouslyDenied)
            } else {
                // Permission denied or first time requested
                if (PermissionUtil.isFirstTimeAskingPermission(context,
                                permission)) {
                    PermissionUtil.firstTimeAskingPermission(context,
                            permission,
                            false)
                    completion(CheckPermissionResult.PermissionAsk)
                } else {
                    // Handle the feature without permission or ask user to manually allow permission
                    completion(CheckPermissionResult.PermissionDisabled)
                }
            }
        } else {
            completion(CheckPermissionResult.PermissionGranted)
        }
    }
}

具有以下模板：

PermissionHandler.checkPermission(activity,
                    Manifest.permission.CAMERA) { result ->
                when (result) {
                    CheckPermissionResult.PermissionGranted -> {
                        // openCamera()
                    }
                    CheckPermissionResult.PermissionDisabled -> {
                        // displayAlert(noPermissionAlert)
                    }
                    CheckPermissionResult.PermissionAsk -> {
                        // requestCameraPermissions()
                    }
                    CheckPermissionResult.PermissionPreviouslyDenied -> {
                        // displayAlert(permissionRequestAlert)
                    }
                }
            }

和样式表：

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; } 函数时数据已经存在，所以我不确定为什么它会破坏卡的CSS。这是应该的样子：

这就是最终的样子：

有什么想法如何处理吗？

Answer 1

因为要绑定到class，所以您将覆盖组件本身应用于mat-card的所有类-特别是mat-card，这就是为什么它不再像卡片一样出现的原因。不要绑定到class，而是使用ngClass来实现此目的-添加类而不是 setting 类：

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