Splitting hyperlinks in Angular4

Question

I am new to angular4 working over MEAN Stack My data is coming from Mongo DB in the form of a list of hyperlinks.Now I want that when I click over each link in UI, it should be opened as a separate link but as of now, it is opening a combined link ie it is taking as a single entry. I am trying to pass ';' after each link in Mongo Db and at the UI level I am trying to separate/split 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>

My structure of JSON is:

{
    "_id":"537437505593", 
    "SNo" :"1", 
    "UseCase":"hfwioegepepohgy", 
    "Focus":"hellow world", 
    "RefernceLinks":"link1";"link2";"link3"
}

These links are rendered to UI as link1;link2;link3.Clicking over link1 click over all other links also.Kindly help.

Answer 1

You need to create a custom pipe

@Pipe({
  name: 'split'
})
export class SplitPipe implements PipeTransform {
  transform(val:string, separator:string):string[] {
    return val.split(separator);
  }
}

And use it like this

<a *ngFor="let link of item.ReferenceMaterials|split" href="{{link}}">{{link}}</a>

Or item.RefernceLinks like your json shows...

Answer 2

使用ngFor 。

<a *ngFor="let link of item.ReferenceMaterials" href="{{link}}">{{link}}</a>