如何在组件的返回值中设置跨度标签

Question

在下面的示例中，如何在x，y和total周围设置跨度标签，以使其不是一个字符串？

 <div>
        {{GetNumbers()}}
    </div>

GetNumbers(){
const x = 10;
const y = 5;
total = 5;

return `${x} - ${y} of ${total}`;
}

Answer 1

您可以将div的innerHTML属性设置为使用您的字符串，包括span标记：

@media (max-width: 480px) {
    #if70u {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    #if70u {
        font-size: 40px;
    }
}

StackBlitz：https://stackblitz.com/edit/angular-vlp9au?file=src%2Fapp%2Fapp.component.ts