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总是在解析内部函数调用之前返回 undefined 。

你可以用以下方法测试：

console.log(compareUser(aUID));

如果不了解更多逻辑/要求，很难建议替代方案。

对ngClass的函数调用不起作用

2 个答案: