我正在尝试使用Angular 2设置Bootstrap标签条。我在ngFor中显示了标签，但是当我尝试放置{{1}时我遇到了模板错误在#表达式的前面。所以这个模板编译但不是我想要的：
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"添加到表达式前面的正确语法是什么？
答案 0 :(得分：39)
无需使用@ManagedBean(name = "myBean")
@ViewScoped
public class MyBean implements Serializable {
private int activeIndex = 0;
public int getActiveIndex() {
return activeIndex;
}
public void setActiveIndex(int activeIndex) {
this.activeIndex = activeIndex;
}
public void nextTab() {
activeIndex++;
}
}
在此代码中
# <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。
答案 1 :(得分：11)
你可以用字符串插值绑定它：
href = "#{{aType.Name}}"
（请注意，此处使用的属性为href，而非[attr.href]。）
答案 2 :(得分：1)
您为什么不使用routerLink而不是href？我认为，这会起作用
<a routerLink="#{{ aType.Name }}">Name<a>