ngClass 上的函数调用不起作用

Question

我在使用ngClass和用Ionic 2和Firebase构建应用程序的函数方面遇到了问题。 该函数确实有效，但函数的值不在 HTML 代码中。我以此为例：https://codepen.io/andre13/pen/oecgi。

该函数的 html 和调用如下所示：

<button  ion-button class="chatbutton" [ngClass]="compareUser(user.$key)"
(click)="gotoDoctorChat(user.$key)" >{{user.naam}} </button>

该函数如下所示：

compareUser(uid){
this.angFire.database.object('/users/' + uid +'/'+ this.coach1+'red').subscribe(snapshot=>{
console.log("snapshot.tostring = " + snapshot.$value);
if(snapshot.$value === '0'){
return 'unread';
}else{
return null;
}
})

};

CSS 如下所示：

.unread{
background-color: red!important;
}

如果有什么不清楚的地方，请询问。

Answer 1

尝试像这样用单引号 ('( 括起来

return "'unread'";

并确保在主组件中导入了正确的模块

import { NgClass } from '@angular/common';

Answer 2

原因是函数compareUser总是在解析内部函数调用之前返回未定义。

您可以使用以下内容进行测试：

console.log(compareUser(aUID));

如果不了解您的逻辑/要求，很难提出替代方案。