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

Question

如果打印案例 3 和“接受您的提议”，我正在尝试将文本背景设置为绿色。我想使用 elementRef 访问 DOM 和 javascript 以使用 if 语句添加背景颜色。我在 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

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

但你试图违背 angular 原则。不要使用 viewchild 访问 DOM，而是定义一个属性并从您的标记中评估属性。

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

.acceptedoffer {
   background: green;
}

然后在你的组件打字稿 class 中，定义一个布尔值属性指示这是否是一个已接受的提议：

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 class 有条件地添加到 isAcceptedOffer 的值为真，并删除视图子声明：

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

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

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

If statement and ElementRef to change background color not working [Angular]

angular

elementref