Как я могу генерировать различные элементы DOM на основе свойств JSON в Angular?

Question

В рамках моего приложения одна из функций включает отображение примечаний к выпуску для пользователя при развертывании новой версии приложения.Эти заметки о выпуске хранятся в бэкэнде в формате JSON со структурой, приведенной ниже.

{
    "version": "1.0.0",
    "workItems": [
        {
            "id": 18391,
            "title": "Release Note Item Title",
            "elements": [
                {
                    "elementType": 1,
                    "elementData": [
                        "Release note item paragraph"
                    ]
                },
                {
                    "elementType": 2,
                    "elementData": [
                        "Release note list item 1",
                        "Release note list item 2",
                        "Release note list item 3"
                    ]
                }
            ]
        }
    ]
}

В файле JSON есть номер version, а также массив объекта workItem,каждый объект содержит идентификатор, заголовок, а затем внутренний массив elements, в котором хранятся текстовые элементы, которые необходимо отобразить пользователю.Каждый элемент в массиве elements представляет собой отдельную структуру, где elementType представляет именно тот тип HTML-элемента, который необходимо отобразить.

1 = Paragraph
2 = Unordered list 

То есть elements[0] представляет <p>Release note item paragraph</p>

В то время как elements[1] представляет

<ul> 
    <li>Release note list item 1</li>
    <li>Release note list item 2</li>
    <li>Release note list item 2</li>
</ul>

Мне нужно найти способ, которым я могу отображать соответствующие теги HTML в соответствии со значением elementType для каждого объекта.Так как Angular не поощряет ручное манипулирование DOM, я не уверен, что делать дальше.

Я рассмотрел печать всех элементов и затем использование * ngIf, чтобы каким-то образом определить, какие элементы HTML отображаются пользователю, но, насколько мне известно, * ngIf предназначен исключительно для определения того, является ли элементто есть манипулирует CSS с уже существующими HTML-элементами и не может использоваться для условной визуализации определенного HTML-кода раньше времени.

<div *ngFor="let element of data.elements">
    <p *ngIf="element.elementType === '1'">{{element.elementData}}</p>
</div>

Я пробовал вышеупомянутое, но это, очевидно, не работает.

Мне кажется, что это не то, что может быть достигнуто в шаблоне, и вместо этого потребуетсясначала сделать в компоненте, а затем отправить в шаблон.Будет ли это работать, если я вместо этого построю строки HTML внутри компонента с использованием данных JSON заранее, а затем шаблон будет отображать их постепенно?

Answer 1

Попробуйте так:

<div *ngFor="let data of dataSet.workItems">
    <div *ngFor="let element of data.elements">
        <p *ngIf="element.elementType == 1">{{element.elementData[0]}}</p>
        <ul *ngIf="element.elementType == 2">
            <li *ngFor="let list of element.elementData">
                {{list}}
            </li>
        </ul>
    </div>
</div>

Рабочая демоверсия

Answer 2

'elementType' в ваших данных JSON - это число, но вы сравниваете его со строкой в ​​шаблоне (используя кавычки вокруг числа).Попробуйте вместо этого:

<div *ngFor="let element of data.elements">
    <p *ngIf="element.elementType === 1">{{element.elementData[0]}}</p>
</div>