在Angular4中拆分超链接答案

【问题标题】：Splitting hyperlinks in Angular4在Angular4中拆分超链接
【发布时间】：2018-03-30 11:27:23
【问题描述】：

我是 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"
}

这些链接以链接 1；链接 2；链接 3 的形式呈现到 UI。点击链接 1 也可以点击所有其他链接。请帮助。

【问题讨论】：

您的 json 看起来对 ReferenceLinks 无效

标签： html css json angular mean-stack

【解决方案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.ReferenceLinks...

【讨论】：

【解决方案2】：

使用ngFor。

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

【讨论】：