在Angular中的属性指令中设置href [英] Set href in attribute directive in Angular

问题描述

我正在尝试使用Angular 2设置Bootstrap选项卡.我在ngFor中显示了选项卡，但是当我尝试将#放在href前面时遇到模板错误.表达.因此，该模板可以编译，但不是我想要的:

I'm trying to set up a Bootstrap tab strip with Angular 2. I have the tabs rendering in an ngFor but I'm getting template errors when I try to put the # infront of the href expression. So this template compiles but isn't what I want:

<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" 但这炸毁了.在属性指令的表达式前加#的正确语法是什么?

What I want to do is [attr.href]="#aType.Name" but that blows up. What is the correct syntax to prepend the # in front of the expression in the attribute directive?

推荐答案

不需要以#

在此代码中

<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变量.

如果要为文字#加上前缀，可以使用

If you want to prefix a literal # you can use

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

如果元素实际上具有属性href(对于<a>就是这种情况)，也不需要attr..

There is also no need for attr. if the element actually has the property href which is the case with <a>.

这篇关于在Angular中的属性指令中设置href的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！