Span-текст не отображается в элементе с innerHtml

Question

Я хочу иметь два элемента: <p> с внутренним html и в том же <p> элементе <span> тег с обычным текстом.

 <p innerHtml="{{ someText | slice: 0:150 }}">
  <span>...Read more</span></p>

Проблема в том, что с тегом innerHtmml Текст "... Читать дальше" не отображается на экране. Как я могу решить эту проблему? Примечание: мне нужно, чтобы эти два: innerHtml + span text были в одной строке.

Answer 1

В вашем компоненте вы можете получить что-то вроде этого

component.ts

someText = '<h2>A header </h2><p>Text to slice</p>';

export class MyComponent implements OnInit {
   constructor() {
     someText = someText.slice(0,150);
     someText += '<span class="span_class">...Read more </span>';
   }
}