Javascript Angular2-Can'；t绑定到'；客户'；因为它不是'；t'的已知属性；我的客户&x27；

我正在遵循一个过时的约翰·帕帕和巴迪·沃德教程，无法通过这个问题。我浏览了一系列SO帖子，这些帖子导致我没有在组件中使用

指令：

，而是在主模块中使用

声明：

属性。但是仍然没有运气：（下面是控制台错误和它所指的代码。有人能帮忙吗？谢谢

customer.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: 'app-customer',
    templateUrl: 'app/customer/customer.component.html'
})

export class CustomerComponent implements OnInit {
    @Input() customer: {id: number, name: string};

    constructor() { }

    ngOnInit() { }
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
import { CustomerComponent } from "./customer/customer.component";

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, CustomerComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';
import { CustomerComponent } from './customer/customer.component';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent  { 

  title = "Welcome to Dean's World of Angular..."; 
  heading = 'Enjoy your stay!'
  deansColor = 'red';
  customers = [
    {id: 1, name: "Dean"},
    {id: 2, name: "Daryl"},
    {id: 3, name: "Lee"},
    {id: 4, name: "Josh"},
    {id: 5, name: "Gerald"},
  ];

  changeHeadingColor() {
    this.deansColor = this.deansColor === 'blue' ? 'red' : 'blue';
      }

}

customer.component.html

<span [style.color]="deansColor">{{customer.id}}</span>
        &nbsp;
<span>{{customer.name}}</span>

<h1>{{title}}</h1>

<!--property binding-->
<div [style.color]="deansColor">
    {{heading}}
</div>

<!--event binding-->
<button (click)="changeHeadingColor()"> 
    Change Heading Color
</button>

<!--two way data-binding (approach #1)-->
<input type="text" [value]="heading" (keyup.enter)="heading = $event.target.value"> 

<!--two way data-binding (approach #1)-->
<input type="text" [(ngModel)]="heading">

<br/>

<ul>
    <li *ngFor="let c of customers">     
        <my-customer [customer]="c"></my-customer>   
    </li>
</ul>

应用程序组件.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: 'app-customer',
    templateUrl: 'app/customer/customer.component.html'
})

export class CustomerComponent implements OnInit {
    @Input() customer: {id: number, name: string};

    constructor() { }

    ngOnInit() { }
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
import { CustomerComponent } from "./customer/customer.component";

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, CustomerComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';
import { CustomerComponent } from './customer/customer.component';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent  { 

  title = "Welcome to Dean's World of Angular..."; 
  heading = 'Enjoy your stay!'
  deansColor = 'red';
  customers = [
    {id: 1, name: "Dean"},
    {id: 2, name: "Daryl"},
    {id: 3, name: "Lee"},
    {id: 4, name: "Josh"},
    {id: 5, name: "Gerald"},
  ];

  changeHeadingColor() {
    this.deansColor = this.deansColor === 'blue' ? 'red' : 'blue';
      }

}

app.component.html

<span [style.color]="deansColor">{{customer.id}}</span>
        &nbsp;
<span>{{customer.name}}</span>

<h1>{{title}}</h1>

<!--property binding-->
<div [style.color]="deansColor">
    {{heading}}
</div>

<!--event binding-->
<button (click)="changeHeadingColor()"> 
    Change Heading Color
</button>

<!--two way data-binding (approach #1)-->
<input type="text" [value]="heading" (keyup.enter)="heading = $event.target.value"> 

<!--two way data-binding (approach #1)-->
<input type="text" [(ngModel)]="heading">

<br/>

<ul>
    <li *ngFor="let c of customers">     
        <my-customer [customer]="c"></my-customer>   
    </li>
</ul>

---

您使用了错误的选择器

尝试：

---

将customer.component.ts中的

选择器：“应用程序客户”

更改为

选择器：“我的客户”

。

---

另外，我认为，

…

应该更改颜色，因为deansColor仅在父组件中定义。

我不确定您是否拥有它，但您也需要发布相应的代码（CustomerComponent-ts和html）谢谢。刚刚添加了它！如上所述。我认为…应该更改颜色，因为deansColor仅在父组件中定义。它是有效的。非常感谢！现在我必须找出我在教程中出错的原因。为什么是“应用程序客户”？做得好：）Angular很难理解，但坚持它-完全值得！我有完全相同的问题（我使用div而不是模板的选择器标记），但是，我不知道如何替换。如何在div标记中容纳相同的代码？