angular - 无法绑定(bind) 'label'，因为它不是已知属性

Question

我有一个组件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
}

带模板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>

我还有一个组件 player-card.component.ts 应该使用这个 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;
}

带模板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>

在运行时失败并出现错误

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

有什么问题？ label 和 value 是 PlayerRecordComponent 的属性。

Answer 1

您的 player-record 组件应具有 label 和 value 作为 Input 属性，因为它们正在监听PlayerCard 组件的绑定(bind)

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