kann nicht ‚label‘ binden, da es nicht eine bekannte Eigenschaft ist

Question

ich eine Komponente player-record.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'player-record', 
    templateUrl: 'player-record.component.html' 
}) 
export class PlayerRecordComponent { 
    label: string; 
    value: string 
} 

mit Vorlage player-record.component.html

<label class="col-xs-2 col-form-label">{{label}}</label> 
<div class="col-xs-10"> 
    <label class="form-control text-muted">{{value}}</label> 
</div> 

Auch habe habe ich eine Komponente player-card.component.ts, die angeblich diese PlayerRecordComponent

import { Component } from '@angular/core'; 

import { Player } from './player'; 

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

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

mit Vorlage verwenden player-card.component.html

<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/100px180/?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> 

In Laufzeit nicht mit dem Fehler

Can't bind to 'label' since it isn't a known property of 'player-record'. 
1. If 'player-record' is an Angular component and it has 'label' input, then verify that it is part of this module. 
2. If 'player-record' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
("ss="form-group row" *ngFor="let key of CONTENT_CARD_META_KEYS"> 

        <player-record [ERROR ->][label]="CONTENT_CARD_META[key]" [value]="player[key]"></player-record> 

       </div> 

    "): PlayerCardComponent@21:35 
Can't bind to 'value' since it isn't a known property of 'player-record'. 
1. If 'player-record' is an Angular component and it has 'value' input, then verify that it is part of this module. 
2. If 'player-record' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
("ey of CONTENT_CARD_META_KEYS"> 

        <player-record [label]="CONTENT_CARD_META[key]" [ERROR ->][value]="player[key]"></player-record> 

       </div> 

      </div> 

"): PlayerCardComponent@21:68 

Was ist das Problem? label und value sind Eigenschaften von PlayerRecordComponent.

Answer 1

sollte Ihr player-record Komponente label & value sowohl als Input Eigenschaft haben, wie sie für die Bindung von PlayerCard Component hören

import { Component, Input } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'player-record', 
    templateUrl: 'player-record.component.html' 
}) 
export class PlayerRecordComponent { 
    //added Input decorator over label & value props 
    @Input() label: string; 
    @Input() value: string; 
}