在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>.

Answer 2

那你可以用字符串插值绑定它:

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

(注意,这里使用的属性href不是[attr.href].)