html - 在 Angular4 中拆分超链接

Question

我是 angular4 的新手，在 MEAN Stack 上工作 我的数据以超链接列表的形式来自 Mongo DB。现在我希望当我点击 UI 中的每个链接时，它应该作为一个单独的链接打开但是截至目前，它正在打开一个组合链接，即它作为一个条目。我正在尝试通过 ';'在 Mongo Db 和 UI 级别的每个链接之后，我试图根据每个“；”来分离/拆分。

<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>

我的 JSON 结构是:

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

这些链接呈现给 UI 为 link1;link2;link3。点击 link1 也点击所有其他链接。请帮忙。

Answer 1

您需要创建一个自定义管道

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

然后像这样使用它

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

或者像你的 json 显示的 item.RefernceLinks...