在Angular中的属性指令中设置href

我试图设置一个与Angular 2的Bootstrap选项卡条。我有一个ngFor呈现的选项卡，但是当我尝试将#面前的#href表达。所以这个模板编译，但不是我想要的：在Angular中的属性指令中设置href

<ul class="nav nav-tabs" role="tablist"> 
    <li *ngFor="let aType of resourceTypes; let i = index" 
     [ngClass]="{'active': i == 0}" 
     role="presentation"> 
    <a [attr.href]="aType.Name" 
     [attr.aria-controls]="aType.Name" 
     role="tab" 
     data-toggle="tab"> 
     {{aType.Name}} 
    </a> 
    </li> 
</ul>

我想要做的是[attr.href]="#aType.Name" 但炸毁。在属性指令的表达式前添加#的正确语法是什么？

来源

2016-06-21 cobolstinks

没有必要与#

前缀在此代码中

<ul class="nav nav-tabs" role="tablist"> 
    <li *ngFor="let aType of resourceTypes; let i = index" 
     [ngClass]="{'active': i == 0}" 
     role="presentation"> 
    <a [attr.href]="aType.Name" 
     [attr.aria-controls]="aType.Name" 
     role="tab" 
     data-toggle="tab"> 
     {{aType.Name}} 
    </a> 
    </li>

aType已经指的是*ngFor变量。

如果你想前缀文字#可以使用

[attr.href]="'#' + aType.Name"

也没有必要attr.如果元素实际上有属性href这与<a>的情况。

来源

2016-06-21 15:26:34

一旦使用'[attr.href]'与'[href]'区别，前者不会绑定，如果该值为null - 这对我来说很方便，因为我希望锚点被禁用，如果我绑定的url属性没有设置。 – spongessuck

那么你可以用串插绑定它：

href = "#{{aType.Name}}"

（注意，这里使用的属性是href，不[attr.href]。）

来源

2016-06-21 15:26:10 rinukkusu

在Angular中的属性指令中设置href

回答

相关问题