Angular 如何将NgIf与字符串插值选择器一起使用？

我的代码运行良好，但未应用我所需的背景样式。如果选择了

getLatestSystemMessage

的案例3，并且

isUserOwner

为false，则应用程序上会打印“已接受”。但是，如果出现这种情况，我想添加一个绿色背景。为了实现这一点，我考虑使用

NgIf

，并通过字符串插值

{{}}

传递文本。我是angular的新手，所以我不知道为什么我的代码不能工作…我如何才能做到这一点？到目前为止，我的代码如下：

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';
                    break;
                case 4:
                    content = isUserOwner ?
                        "You accepted another translator's offer" :
                        "Accepted another translator's offer";
                    break;
            }
        }

        return content;
    }
    const statusBg === "Accepted" ? "style="background-color: green"";
    console.log(this.statusBg.nativeElement);

getLatestSystemMessage（线程：线程）：字符串{
const message=thread.messages.slice（）.reverse（）.find（m=>m.type！==0）；
const isUserOwner=thread.project.user.id==this.user.id；
让内容=“”；
如果（信息）{
开关（message.type）{
案例1：
如果（message.content>0）{
content=isUserOwner？
`向您提供$${message.content}`:
`您提供了$${message.content}`；
}否则{
content=isUserOwner？
`提供免费翻译：
`你主动提出免费翻译`；
}
打破
案例2：
content=isUserOwner？
‘取消优惠’：
“您取消了报价”；
打破
案例3：
content=isUserOwner？
“你接受了这个提议”：
“接受”；
打破
案例4：
content=isUserOwner？
“你接受了另一位翻译的提议”：
“接受了另一位翻译的提议”；
打破
}
}
返回内容；
}
const statusBg==“已接受”？“style=”背景色：绿色“；
console.log（this.statusBg.nativeElement）；

模板：

<p class="mb-0" *Ngif = "{{getLatestSystemMessage(thread)}} === ‘Accepted’" "style = background-color:green"><strong>{{getLatestSystemMessage(thread)}}</strong></p>

{{getLatestSystemMessage（线程）}

根据经验，视图本身不应该有太多逻辑

我认为你想做的太多了

您始终可以创建一个控制器函数来为您执行更复杂的逻辑

<p class="mb-0" *ngIf="isAccepted(thread)" style = "background-color:green"><strong>{{ getLatestSystemMessage(thread) }}</strong></p>

或者，如果您希望在视图中保留逻辑，您可以像下面这样修改代码

请注意：

• ngIf

  案例不正确
• 在这种情况下，不需要插值

{{getLatestSystemMessage（线程）}}

我收到一条错误消息…说getLatestSystem消息无效…至于第二个解决方案，它也不起作用，我不确定为什么

返回getLatestSystemMessage（线程）==“已接受”；-错误TS1127:无效字符。

我尝试使用

“

在

样式之前

在

=

之后，我尝试编辑您的答案，但我无法编辑这些带引号的小错误来自您问题中的代码，我刚刚修复了我在答案中带过的这些语法错误。。。但这两种解决方案都解决了您提出的问题

 isAccepted(thread) {
  return getLatestSystemMessage(thread) ===  'Accepted';
 }

<p class="mb-0" *ngIf = "getLatestSystemMessage(thread) === 'Accepted'" style = "background-color:green"><strong>{{getLatestSystemMessage(thread)}}</strong></p>