How to hide specific div tags depends upon specific array values-CodePudding

I am getting array like this in the typescript :

allFlowerTypes (3) ['Rose', 'Bluebell' , 'Daisy']

and I need to hide/show below html code according to the above array list :

<ul>
  <li>Rose</li>
  <li>Bluebell</li>
  <li>Daisy</li>
</ul>

for eg: If I have only Rose and Daisy in the array then html list should be showing that 2 li tags only.

allFlowerTypes (2) ['Rose', 'Daisy']

then display these particular li tags and hide the particular one for Bluebell

<ul>
  <li>Rose</li>
  <li>Daisy</li>
</ul>

And it should work for all the respective combinations accordingly.

Any help would be greatly appreciated.

CodePudding user response：

You can try below code. if you are using angular then use *ngFor in html

let allFlowerTypes = ['Rose', 'Bluebell' , 'Daisy']

    let list = document.getElementById("myList");

    allFlowerTypes.forEach((item) => {
        let li = document.createElement("li");
        li.innerText = item;
        list.appendChild(li);
    });

<!DOCTYPE html>
<html>
<head> </head>
<body>
    <ul id="myList"></ul>
</body>
</html>