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

我试图像这样“直截了当”地说：* ngFor =“让dogC of dogs”及其作品，

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

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

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

Answer 1

在你的狗组件中：

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（）无法正常工作

1 个答案: