Angular2如何绑定到自定义组件输入参数

Question

我有一个显示 phone 数字的自定义组件 (stm-phone-number)。它有一个名为 phoneNumber 的 @Input() 参数。当我尝试在 *ngFor 中将数据绑定到它时，我收到此错误消息：

Can't bind to 'phoneNumber' since it isn't a known property of 'stm-phone-number'.

这是我的代码：

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

import { KeyValueModel } from '../../models/types/key-value';

@Component({
    moduleId: module.id,
    selector: 'stm-phone-number',
    templateUrl: './phone-number.component.html',
    styleUrls: [ './phone-number.css' ],
    providers: [],
    directives: []
})
export class PhoneNumberComponent implements OnInit 
{
    @Input() phoneNumber: KeyValueModel<string,string>; 

    constructor ()
    {
    }


    ngOnInit()
    {
    }
}

下面是我的使用方法：

<section class="grid-block" *ngFor="let entry of PhoneNumberList">
    <stm-phone-number [phoneNumber]="entry"></stm-phone-number>
</section>

注意：PhoneNumberList 是 KeyValueModel<string,string>

的数组

如何将 ngFor 中的迭代值绑定到自定义组件的 @Input 属性？

Answer 1

您需要将 PhoneNumberComponent 添加到您正在使用它的模块的 directives: [...] 列表中，或者导入包含 PhoneNumberComponent (>= RC.5) 的模块，否则组件不会被实例化，这通常是导致您提到的错误的原因。

Angular2如何绑定到自定义组件输入参数

Angular2 how to bind to a custom component input parameter

angular2-directives

angular2-template

angular