Zugang konstant aus Vorlage

Question

Ich habe eine einfache Komponente player-card.component.ts

export const CONTENT_CARD_META = { 
    "rank": "Rank", 
    "age": "Age", 
    "gender": "Gender", 
    "race": "Race" 
}; 

export const CONTENT_CARD_META_KEYS = [ "rank", "age", "gender", "race" ]; 

@Component({ 
    moduleId: module.id, 
    selector: 'player-card', 
    templateUrl: 'player-card.component.html' 
}) 
export class PlayerCardComponent { 
    player: Player = { 
     id: '1', 
     rank: 'C', 
     age: 10, 
     gender: 'male', 
     race: 'human' 
    }; 
} 

Und Vorlage für sie

<ul class="nav nav-tabs" role="tablist"> 
    <li class="nav-item"> 
     <a class="nav-link active" id="playerCard-tab" 
      data-toggle="tab" href="#playerCard" role="tab" aria-expanded="true" aria-controls="playerCard">Guild card</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" id="magicCard-tab" data-toggle="tab" href="#">Magic card</a> 
    </li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane fade in active" id="playerCard" role="tabpanel" aria-labelledby="playerCard-tab"> 
     <div class="card"> 
      <div class="card-block"> 
       <h4 class="card-title text-muted">{{player.name}}</h4> 
       <h6 class="card-subtitle text-muted"> 
        Adventurer card 
       </h6> 
      </div> 
      <img data-src="holder.js/200px200/?text=Image"> 
      <div class="card-block"> 
       <div class="form-group row" *ngFor="let key of CONTENT_CARD_META_KEYS"> 
        <player-record [label]="CONTENT_CARD_META[key]" [value]="player[key]"></player-record> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Wenn ich wie diese tun

<div class="form-group row" *ngFor="let key of CONTENT_CARD_META_KEYS"> 
    <player-record [label]="CONTENT_CARD_META[key]" [value]="player[key]"></player-record> 
</div> 

es nicht, wenn sich work.But Ich erstelle Felder in PlayerCardComponent

export class PlayerCardComponent { 
    cartContent = CONTENT_CARD_META; 
    keyCartContent = CONTENT_CARD_META_KEYS; 

Und tun wie dieses

<div class="form-group row" *ngFor="let key of keyCartContent"> 
    <player-record [label]="cartContent[key]" [value]="player[key]"></player-record> 
</div> 

Es funktioniert gut. Wie verwendet man const Variablen in der Komponentenvorlage?

Answer 1

In der Vorlage ist nur verfügbar, was die aktuelle Komponente Klasseninstanz bietet.

Wenn Sie auf Objekte außerhalb der Komponenteninstanz zugreifen möchten, benötigen Sie eine Referenz in der Komponenteninstanz, die es ermöglicht, die Komponente zu erreichen.

Es gibt keinen Weg um.