Question

我的dash.component.html中有以下代码行：

<mat-card-title [ngStyle]="{'color': offlineOnline.value <= 4 ? '#e74c3c' : '#2ecc71'}">THINGY</mat-card-title>

offlineOnline调用webapi服务并以以下形式返回一个json对象：

{"tagname":"mytag", "value":"99"}

我有一个名为myClass的课程，该课程具有：

export class myClass{
    tagname: string;
    value: number;
}

在dash.component.ts内，我有以下信息：

offlineOnline:myClass;

ngOnInit() {

this._myapi.getonoffli()
    .subscribe
    (
      data=>
      {
         this.offlineOnline = data;
      }
    )

在myapi.services.ts

中调用以下内容

getonoffline():Observable<myClass>{
        return this.httpclient.get<myClass>(this.myUrl+ "mytagname").pipe(map(res => new myClass(res)));
    }

以上所有方法均有效，mat-card-title文本的颜色根据返回的值而变化，但是.....

我在与该行相关的控制台中看到以下错误，因此我必须做错了什么，我想知道什么。

Answer 1

首先，因为使用了三元运算符If True:#e74c3c/ False:#2ecc71，所以每次都会显示一种颜色。第二个，您的DOM首先加载，但是没有得到变量值，这是您在三元运算符中使用的。要优先考虑，请遵循此https://angular.io/guide/lifecycle-hooks。或者您可以通过这种方式消除此错误。

一个：在三元运算符中检查offlineOnline。

<mat-card-title [ngStyle]="{'color': offlineOnline?.value <= 4 ? '#e74c3c' : '#2ecc71'}">THINGY</mat-card-title>

第二：检查是否在DOM中获得offlineOnline而不是创建mat-card-title。

<mat-card-title *ngIf="offlineOnline"
[ngStyle]="{'color': offlineOnline.value <= 4 ? '#e74c3c' : '#2ecc71'}">
    THINGY
</mat-card-title>

Answer 2

我建议稍微重做一点，不要直接在组件中订阅observable，而是将observable分配给变量：

@Component({
    selector: 'app-dash',
    templateUrl: './dash.component.html',
    styleUrls: ['./dash.component.css']
})
export class DashComponent {
    public offlineOnline$: Observable<myClass>;

    constructor(private readonly _myapi: MyApiService) {
        this.offlineOnline$ = this._myapi.getonoffli();
    }
}

这将使Angular管理订阅并防止内存泄漏。
下一个重写组件如下：

<mat-card-title *ngIf="offlineOnline$ | async as offlineOnline" [ngStyle]="{'color': offlineOnline.value <= 4 ? '#e74c3c' : '#2ecc71'}">
    THINGY
</mat-card-title>

使用async管道，只有在从API收到值后，您才会显示卡。

此外，您的API数据是粗略的，而您的类将其作为整数，API将其作为字符串返回，请确保您获得的是数字而不是字符串，并且将数字与代码中的数字进行比较。 / p>

从API值更改字体颜色时出现角度错误

2 个答案: