Setzen Sie href in Attribut-Direktive in Angular

Question

Ich versuche, eine Registerkarte Bootstrap mit Angular 2 einzurichten. Ich habe die Tabs Rendering in einem ngFor, aber ich bekomme Vorlagenfehler, wenn ich versuche, die vor der href Ausdruck. So stellt diese Vorlage aber nicht das, was ich will:

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

Was ich tun möchte, ist [attr.href]="#aType.Name" aber das sprengt. Was ist die korrekte Syntax, um das # vor dem Ausdruck in der Attributrichtlinie voranzubringen?

Answer 1

Es gibt keine Notwendigkeit, mit #

Präfix In diesem Code

<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 bezieht sich bereits auf die Variable *ngFor.

Wenn Sie eine wörtliche # Präfix möchten, können Sie

verwenden

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

Es gibt auch keine Notwendigkeit für attr., wenn das Element tatsächlich die Eigenschaft hat, href was der Fall mit <a> ist.

Answer 2

Nun können Sie es binden mit String-Interpolation:

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

(Beachten Sie, dass das Attribut hier verwendet wird, ist href, nicht [attr.href].)