在 Angular4 中拆分超链接

Question

我是 angular4 的新手，在 MEAN Stack 上工作我的数据来自 Mongo 数据库，形式为 hyperlinks.Now 我希望当我点击每个 link在 UI 中，它应该作为一个单独的 link 打开，但截至目前，它正在打开一个组合 link，即它作为一个条目。我正在尝试通过 ';'在 Mongo Db 中的每个 link 之后，在 UI 级别，我试图 separate/split 基于每个 ';'。

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

这些 link 呈现给 UI 为 link1;link2;link3.Clicking link1 点击全部其他 links also.Kindly 帮助。

Answer 1

使用ngFor.

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

Answer 2

您需要创建自定义管道

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

或 item.RefernceLinks 就像您的 json 节目...

在 Angular4 中拆分超链接

Splitting hyperlinks in Angular4

html

css

json

mean-stack

angular