If语句和ElementRef更改背景颜色不起作用[Angular]

Question

如果情况3和"接受你的报价"；已打印。我想使用elementRef访问DOM，并使用if语句使用javascript添加背景颜色。我在component.ts文件的后面添加了if语句，但它破坏了程序，在此之前它运行良好，打印正确。控制台上不会显示任何错误消息。如何使用此方法更改背景颜色以实现我想要的行为？提前谢谢。这是我的.component.ts和.html文件：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@ViewChild('latestSystemMessage', { static: true })
latestSystemMessage: ElementRef;
export class MessagesComponent implements OnInit {
getLatestSystemMessage(thread: Thread): string {
const message = thread.messages.slice().reverse().find(m => m.type !== 0);
const isUserOwner = thread.project.user.id === this.user.id;
let content = '';
if (message) {
switch (message.type) {
case 1:
if (<any>message.content > 0) {
content = isUserOwner ?
`Offered you $${message.content}` :
`You offered $${message.content}`;
} else {
content = isUserOwner ?
`Offered to translate for free` :
`You offered to translate for free`;
}
break;
case 2:
content = isUserOwner ?
'Cancelled offer' :
'You cancelled your offer';
break;
case 3:
content = isUserOwner ?
'You accepted the offer' :
'Accepted your offer';
break;
case 4:
content = isUserOwner ?
"You accepted another translator's offer" :
"Accepted another translator's offer";
break;
}
}

if(this.latestSystemMessage.nativeElement === "Accepted your offer" ){
this.latestSystemMessage.nativeElement.style.backgroundColor="green";
}else{};
return content;
}

这是我的.html文件

<p class="mb-0" #latestSystemMessage><strong>{{getLatestSystemMessage(thread)}}</strong></p>

Answer 1

首先，您的视图子级是在组件外部声明的，它应该在组件内部。

但你试图违背棱角分明的原则。与其使用viewchild访问DOM，不如定义一个属性并从标记中评估该属性。

在组件样式文件中为绿色背景定义一个css/sass类：

.acceptedoffer {
background: green;
}

然后在组件typescript类中，定义一个布尔属性，指示这是否是已接受的报价：

export class MessagesComponent implements OnInit {
isAcceptedOffer: boolean = false;

在getLatestSystemMessage方法中的适当时间设置该属性，并去掉viewchild。

为了遵循您当前的业务逻辑，我在您的案例3:中添加了这一行

this.isAcceptedOffer = !isUserOwner;

您的组件现在应该是这样的：

import { Component, OnInit } from '@angular/core';
export class MessagesComponent implements OnInit {
isAcceptedOffer: boolean = false;
getLatestSystemMessage(thread: Thread): string {
const message = thread.messages.slice().reverse().find(m => m.type !== 0);
const isUserOwner = thread.project.user.id === this.user.id;
let content = '';
if (message) {
switch (message.type) {
case 1:
if (<any>message.content > 0) {
content = isUserOwner ?
`Offered you $${message.content}` :
`You offered $${message.content}`;
} else {
content = isUserOwner ?
`Offered to translate for free` :
`You offered to translate for free`;
}
break;
case 2:
content = isUserOwner ?
'Cancelled offer' :
'You cancelled your offer';
break;
case 3:
this.isAcceptedOffer = !isUserOwner;
content = isUserOwner ?
'You accepted the offer' :
'Accepted your offer';
break;
case 4:
content = isUserOwner ?
"You accepted another translator's offer" :
"Accepted another translator's offer";
break;
}
}
return content;
}

最后但同样重要的是，在标记中，有条件地将css类添加到isAcceptedOffer的值为true，并删除视图子声明：

<p class="mb-0" [class.acceptedoffer]="isAcceptedOffer"><strong>{{getLatestSystemMessage(thread)}}</strong></p>

现在我意识到，您可能只共享了组件代码的一小部分，并且可能会增加一些复杂性，但我仍然认为您应该尝试重构并按照它的使用方式使用angular。