itzikb itzikb - 3 months ago 15
TypeScript Question

input() on angular2 is not working Properly

first of all this is my GIT repository where you can see the code:

https://github.com/eshk12/myDogs

I try to practice some parts from the lesson so I have create ANG2 Project call "myDogs".

in the porject I have 3 components,root and DogList,dog.

i have an issue in "DogList" component when I try to send the value "currentDog" as "dogC" to the component "Dog", and error came up and said:

Unhandled Promise rejection:

Template parse errors:
Can't bind to 'dogC' since it isn't a known property of 'dog'. ("
<div>
<dog *ngFor="let currentDog of dogs"
[ERROR ->][dogC]="currentDog"
>
</dog>
"): DogList@3:12

; Zone: <root> ; Task: Promise.then ; Value: BaseException { message="Template parse errors:\nC...</dog>\n"): DogList@3:12", stack="BaseException@http://loc...js/dist/zone.js:426:22\n", constructor=BaseException(), more...}
zone.js (line 461)
Error: Uncaught (in promise): Template parse errors:
Can't bind to 'dogC' since it isn't a known property of 'dog'. ("
<div>
<dog *ngFor="let currentDog of dogs"
[ERROR ->][dogC]="currentDog"
>
</dog>
"): DogList@3:12
throw new Error("Uncaught (in promise): " + value);


I tried to "ul li"ed it like that: *ngFor="let dogC of dogs" and its work,

but when I send it to the other component error come up.

The original GIT repository from my teacher that work: https://github.com/rotemx/Class4-MyMusic

Thanks in advance to those who will help me find the problem.

Answer

In your Dog component:

export class Dog {
  @Input() public DogC: DogModel;
}                 ^^^^

In your DogsList component template:

<dog *ngFor="let currentDog of dogs"
        [dogC]="currentDog"
>       ^^^^^^
</dog>

You defined the Input as DogC but you are trying to bind to dogC. Javascript/Typescript is case-sensitive. Change the Input DogC to dogCand it will work.

By the way, it is not recommended to keep the templates of components in separate folders from the components themselves. Check out the official Angular 2 style guide for the recommended file structure and naming conventions.

Comments