Я новичок в angular. Я пытаюсь визуализировать некоторые динамические c строки шаблона, поступающие с сервера в компоненте.
Компонент выглядит следующим образом -
<div [innerHTML]='templateString'></div>
В файле component.ts у нас есть
obj = {
prop: 'text to display'
}
templateString = '<p class="text-primary">{{obj.prop}}</p>' // this is dynamic, e.g. received from an http request
Если мы оставим это так, он будет отображаться как '{{obj.prop}}', тогда как я хочу, чтобы он отображал 'text to display'. В настоящее время я написал скрипт, который принимает templateString и obj и возвращает свойства с помощью .split ('{{') et c. Есть ли какой-нибудь более простой встроенный способ сделать это в angular? Т.е. динамически компилировать строки шаблона onChanges или onInit, так что я могу использовать ngFor для отображения значений внутри свойства массива, например.
arr = [
{prop: 'text1'},
{prop: 'text2'}
]
templateString = '<p *ngFor="let item of arr">{{item.prop}}</p>'
В настоящее время я использую собственный синтаксис [[arr ::
{{this.prop}}
]], который мой скрипт может читать и перебирать массивы, но он довольно ненадежный и нестандартный.
Я видел это Angular: связать переменные внутри [innerHtml] , но это кажется чрезмерно качественным, поскольку мне не нужно помещать другие компоненты в строку шаблона. Просто стандартный html, с некоторыми директивами, такими как ngFor, ngIf et c,