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

Question

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

我尝试练习课程中的一些部分，所以我创建了 ANG2 项目调用 "myDogs"。

在项目中我有 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 以了解推荐的文件结构和命名约定。

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

input() on angular2 is not working Properly

typescript

angular2-directives

angular