Angular2, wie an einen benutzerdefinierten Komponente Eingabeparameter zu binden

Question

Ich habe eine benutzerdefinierte Komponente für die Anzeige von Telefonnummern (stm-Telefonnummer). Es hat einen @Input() Parameter namens phoneNumber. Wenn ich versuche, es zu binden, Daten in einem *ngFor, erhalte ich diese Fehlermeldung:

Kann nicht binden ‚phonenumber‘, da es nicht eine bekannte Eigenschaft von ‚stm-Telefonnummer‘ ist.

Hier ist mein Code:

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() 
    { 
    } 
} 

und hier ist, wie ich es bin mit:

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

HINWEIS: PhoneNumberList ist ein Array von KeyValueModel<string,string>

Wie binden Sie eine iterativer Wert innerhalb ngFor zu einer @Input Eigenschaft einer benutzerdefinierten Komponente?

Answer 1

Sie müssen PhoneNumberComponent auf die directives: [...] Liste des Moduls hinzuzufügen, wo Sie es verwenden oder das Modul zu importieren, die PhoneNumberComponent enthält (> = RC.5) sonst die Komponente nicht instanziert werden, die in der Regel ist das, was das führt Fehler, den du erwähnt hast.