angular2 上的 input() 无法正常工作

Question

首先这是我的 GIT 存储库，您可以在其中看到代码：

https://github.com/eshk12/myDogs

我尝试练习课程中的一些部分，因此我创建了名为“myDogs”的 ANG2 项目。

在项目中，我有 3 个组件，root 和 DogList，dog。

当我尝试将值“currentDog”作为“dogC”发送到组件“Dog”时，“DogList”组件出现问题，出现错误并说：

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);

我试图这样“ul li”编辑它：*ngFor="let dogC of dogs" 及其工作，

但是当我将它发送到其他组件时出现错误。

我老师的原始 GIT 存储库：https://github.com/rotemx/Class4-MyMusic

提前感谢那些帮助我找到问题的人。

Answer 1

在你的 Dog 组件中：

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

在您的 DogsList 组件模板中：

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

您将输入定义为DogC，但您正在尝试绑定到dogC。 Javascript/Typescript 区分大小写。将输入 DogC 更改为 dogC 即可。

顺便说一下，不建议将组件的模板保存在与组件本身不同的文件夹中。查看the official Angular 2 style guide 以了解推荐的文件结构和命名约定。