Javascript 如何在不更改模板的情况下交换显示的html对象的顺序？

我的

span

中有一个徽章，只有在我的

getLatestSystemMessage

功能中选择了

case 3

时，我才想显示该徽章。我的代码工作正常，除了徽章出现在错误的消息上，因为angular先读取

span

，然后读取

{{getLatestSystemMessage（thread）}}

，因此显示的徽章显示在下一条消息上，而不是当前消息上。我怎样才能以正确的方式克服这个问题？我需要徽章出现在最新系统消息之前

这是我的component.html

<p class="mb-0">
     <span 
     class="badge badge-pill badge-success d-none" 
     [class.d-inline]="isAcceptedOffer">Accepted
     </span>
     <strong> {{getLatestSystemMessage(thread)}}</strong>
</p>

认可的
{{getLatestSystemMessage（线程）}}

这是我的组件

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 = '';

        this.isAcceptedOffer = false;

        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 = true;
                    content = isUserOwner ?
                        `Offered you $${message.content}`:
                        `You offered $${message.content}`;
                    break;
                case 4:
                    content = isUserOwner ?
                        "You accepted another translator's offer" :
                        "Accepted another translator's offer";
                    break;
            }
        }

        return content;
    }

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

您可以在css类中使用，然后在满足条件时使用

[ngClass]

以编程方式激活它

---

这样，如果出现

情况3

，则将该类应用于必须更改顺序的所有元素。您只需使用CSS即可实现这一点，而无需更改模板。

最干净的解决方案是更改模板。以下是我的建议：

认可的
{{getLatestSystemMessage（线程）}}

isAcceptedOffer（线程：线程）：布尔值{
const message=thread.messages.slice（）.reverse（）.find（m=>m.type！==0）；
返回（消息？.type==3）；
}
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：
this.isAcceptedOffer=true；
content=isUserOwner？
`向您提供$${message.content}`:
`您提供了$${message.content}`；
打破
案例4：
content=isUserOwner？
“你接受了另一位翻译的提议”：
“接受了另一位翻译的提议”；
打破
}
}
返回内容；
}

---

如果做不到这一点，我可能会使用上面Francesco的解决方案。

有什么原因不能在模板中交换

和

元素以获得所需的顺序吗？@AmirArbabian是的，我希望在之前出现，如果我可以向

[class.d-inline]=“isAcceptedOffer”添加两个函数，这可能会起作用（线程）

由于我还需要将

isAcceptedOffer

添加到其中，是否可以这样做？我尝试使用&&但它不起作用。我不确定您在这里问什么。为此，我将

isAcceptedOffer

从一个类属性更改为一个方法。如果您想在该方法之外保留该类属性，其中一个将具有e将被重命名。但我不完全确定您为什么要这样做。如果在

*ngFor

中使用此属性，则类属性将始终包含最后处理的线程。很抱歉，我的错，我没有看到。我得到的

类型“boolean”不可分配给类型“（线程：thread）=>boolean'

error这可能是因为您的模板中有

isAcceptedOffer

，而不是

isAcceptedOffer（thread）

。函数返回一个布尔值。很抱歉，我对javascript非常陌生，我在

return（message？.type==3）中看到此错误
错误TS1005:'：'
line知道如何解决这个问题吗？