Currently, I am working with Angular4 on the MEAN Stack and retrieving data from Mongo DB in the form of a list of hyperlinks. However, when I click on each link in the UI, they are opening as a combined link instead of separate links. To address this issue, I am attempting to add a ';' after each link in Mongo Db and then split them at the UI level based on each ';'.
<tbody>
<tr *ngFor="let item of items">
<td> {{ item.SNo }}</td>
<td> {{ item.UseCase }}</td>
<td>
<a href="{{item.ReferenceMaterials.split(';')}}">{{ item.ReferenceMaterials }}</a>
</td>
</tr>
</tbody>
The JSON structure is as follows:
{
"_id":"537437505593",
"SNo" :"1",
"UseCase":"hfwioegepepohgy",
"Focus":"hello world",
"RefernceLinks":"link1";"link2";"link3"
}
When rendered in the UI, these links appear as link1;link2;link3. Clicking on link1 opens all other links as well. Any assistance in resolving this issue would be greatly appreciated.