如何在組件的返回值中設置跨度標簽

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標簽：

<div [innerHTML]="GetNumbers()"></div>

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

  return `<span>${x}</span> - <span>${y}</span> of <span>${total}</span>`;
}

StackBlitz： https ：//stackblitz.com/edit/angular-vlp9au ？ file = src％2Fapp％2Fapp.component.ts