У меня есть следующая строка кода в моем dash.component.html:
<mat-card-title [ngStyle]="{'color': offlineOnline.value <= 4 ? '#e74c3c' : '#2ecc71'}">THINGY</mat-card-title>
В автономном режиме Online вызывается служба веб-API и возвращается один объект 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 меняется в зависимости от возвращаемого значения, но .....
Я вижу следующую ошибку в моей консоли, которая относится к этой строке, поэтому я должен делать что-то не так, и я хотел бы знать, что.
2 ответа
Прежде всего, один цвет отображается каждый раз, потому что вы использовали троичный оператор 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>
Второе: проверьте, если get offlineOnline, чем create mat-card-title create в DOM.
<mat-card-title *ngIf="offlineOnline"
[ngStyle]="{'color': offlineOnline.value <= 4 ? '#e74c3c' : '#2ecc71'}">
THINGY
</mat-card-title>
Я бы порекомендовал немного переделать это и не подписываться на 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 возвращает их в виде строки, убедитесь, что вы получаете число, а не строку, и что вы сравниваете числа с числами в коде.