Question

我是刚接触MEAN Stack的angular4我的数据来自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"
}

这些链接作为link1呈现给UI; link2; link3.Click over link1也点击了所有其他链接。请提供帮助。

Answer 1

您需要创建自定义管道

link.addEventListener(MouseEvent.CLICK, linkOnClick);
function linkOnClick(e:MouseEvent){

this.addEventListener(Event.ENTER_FRAME, enterFrame);

var linkPoint:Point = new Point(link.x, link.y);
var mousePoint:Point = new Point();
var distance:Number;
var radians:Number;

function enterFrame(e:Event):void { 

    //Distance
    mousePoint.x = stage.mouseX;
    mousePoint.y = stage.mouseY;
    distance = Point.distance(linkPoint, mousePoint);
    link.width = distance;

    //Rotation
    radians = Math.atan2(stage.mouseY - link.y, stage.mouseX - link.x);
    link.rotation = radians * (180/ Math.PI);

    if(link.hitTestObject(router)){trace("Success");}
}

并像这样使用

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

或者。像你的json那样的.RefernceLinks ......

Answer 2

使用ngFor。

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

在Angular4中拆分超链接

2 个答案: