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

Question

我正在尝试使用 Angular 2 设置 Bootstrap 选项卡条。我在 ngFor 中呈现选项卡，但是当我尝试放置 # 时出现模板错误 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"但这爆炸了。在属性指令中的表达式前面添加 # 的正确语法是什么？

Answer 1

不需要前缀 #

在这段代码中

<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> 就是这种情况.