Question

我循环浏览列表并显示按钮。

在我的循环中，我有job.hasJob。如果将其设置为1，那么我想在按钮中添加一个类。该类的名称应为job-block-加上job.hasJobDetails.statusColour

的值

例如，如果job.hasJobDetails.statusColour为red，则类名为job-block-red。

如果我在课堂上硬编码，那么它可以工作：

<button ion-button color="dark" [ngClass]="{ 'job-block-red' : job.hasJob == 1}" (click)="changeStatus(job.statuses)" outline>{{ job.jobName }}</button>

但是，如果我尝试这个，那么我会收到一个错误：

<button ion-button color="dark" [ngClass]="{ 'job-block-' + job.hasJobDetails.statusColour : job.hasJob == 1}" (click)="changeStatus(job.statuses)" outline>{{ job.jobName }}</button>

分析器错误：缺少预期：在{{＆＃39;作业区 - ＆＃39; + job.hasJobDetails.statusColour：job.hasJob == 1}]在BedJobsPage @ 62:39（＆＃34;

Answer 1

我认为您不能将ngClass的对象表示法用于动态属性名称。尝试这样的事情：

[ngClass]="job.hasJob == 1 ? 'job-block-' + job.hasJobDetails.statusColour ? null"

或在typescript中构建您的类对象：

getJobClasses(job) {
   return {
       ['job-block-' + job.hasJobDetails.statusColour] : job.hasJob == 1
   }
}

[ngClass]='getJobClasses(job)'

使用ngClass动态设置类名

1 个答案: