angular2上的input（）无法正常工作

Question

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 1

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 dogC and 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.