Angular2如何綁定到自定義組件輸入參數

Question

我有一個用於顯示電話號碼（stm-phone-number）的自定義組件。 它有一個@Input()參數，稱為phoneNumber 。 當我嘗試在*ngFor數據綁定到它時，出現以下錯誤消息：

無法綁定到“ phoneNumber”，因為它不是“ 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: [...]使用模塊的列表directives: [...]或導入包含PhoneNumberComponent （> = RC.5）的模塊，否則該組件將不會被實例化，這通常導致您提到的錯誤。