Как я могу установить теги span в возвращаемом значении компонента

Question

Как мне в следующем примере установить теги span вокруг x, y и total, чтобы это не была одна строка?

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

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

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

Answer 1

Вы можете установить свойство innerHTML для div, чтобы использовать вашу строку, включая теги 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