json - How can I generate different DOM elements based on JSON properties in Angular?

Question

As part of my application one of the features involves displaying release notes to the user when a new version of the app has been deployed. These release notes are stored in the backend in JSON format, with the structure as below.

{
    "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"
                    ]
                }
            ]
        }
    ]
}

Within the JSON file there is the version number, as well as an array of workItem object, each object contains an Id, Title, and then an inner array elements which stores the textual elements that need to be displayed to the user. Each element in the elements array is a separate structure, with elementType representing exactly what type of HTML element needs to be displayed.

1 = Paragraph
2 = Unordered list 

So elements[0] represents <p>Release note item paragraph</p>

While elements[1] represents

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

What I need to do is figure out a way that I can render the appropriate HTML tags according to the value of elementType for each object. Since Angular dis-encourages the manual manipulation of the DOM I'm not sure how to proceed.

I have considered printing all of the elements and then using *ngIf to somehow determine which HTML elements are displayed to the user, but as far as I am aware *ngIf is solely for determining whether or not the element is displayed i.e. manipulating the CSS of already existing HTML elements, and can't be used to conditionally render certain HTML ahead of time.

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

I've tried the above, but this obviously doesn't work.

I feel like this isn't something that can be achieved in the template and instead will be need to done in the component first and then pushed to the template. Would it work if I instead built the HTML strings within the component using the JSON data ahead of time and then had the template display them incrementally?

标签： jsonangular

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>

工作演示