Angular 7 编译错误 NG8002 无法绑定对象，因为它不是已知的属性

Question

我正在 angular 7/8 做一个测试应用程序。我有编译错误 Can't bind 'discounter' since it isn't a known property of 'paDiscountEditor'

我的 html 显示错误的地方很简单...这里我 post 需要的所有文件。

这是app.module.ts文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProductComponent } from "./component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { PaAttrDirective } from "./attr.directive";
import { PaModel } from "./twoway.directive";
import { PaStructureDirective } from "./structure.directive";
import { PaIteratorDirective } from "./iterator.directive";
import { ProductTableComponent } from "./productTable.component";
import { ProductFormComponent } from "./productForm.component";
import { PaToggleView } from "./toggleView.component";
import { PaAddTaxPipe } from "./addTax.pipe";
import { PaCategoryFilterPipe } from "./categoryFilter.pipe";
import { LOCALE_ID } from "@angular/core";
import localeFr from '@angular/common/locales/fr';
import { registerLocaleData } from '@angular/common';
import { PaDiscountDisplayComponent } from "./discountDisplay.component";
import { PaDiscountEditorComponent } from "./discountEditor.component";
registerLocaleData(localeFr);
@NgModule({
  declarations: [ProductComponent, PaAttrDirective, PaModel, PaStructureDirective, PaIteratorDirective, PaCellColor, PaCellColorSwitcher, ProductTableComponent,
    ProductFormComponent, PaToggleView, PaAddTaxPipe, PaCategoryFilterPipe, PaDiscountDisplayComponent, PaDiscountEditorComponent],
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
 // providers: [{ provide: LOCALE_ID, useValue: "fr-FR" }],
  bootstrap: [ProductComponent]
})
export class AppModule { }

这是discountEditor.component.ts文件

import { Component, Input } from "@angular/core";
import { DiscountService } from "./discount.service";

@Component({
    selector: "paDiscountEditor",
    template: `<div class="form-group">
                   <label>Discount</label>
                   <input [(ngModel)]="discounter.discount" 
                        class="form-control" type="number" />              
               </div>`
})
export class PaDiscountEditorComponent {
 
  constructor(public discounter: DiscountService) { }
}

这是Discount.Service.ts文件

export class DiscountService {
  private discountValue: number = 10;
  public get discount(): number {
    return this.discountValue;
  }
  public set discount(newValue: number) {
    this.discountValue = newValue || 0;
  }
  public applyDiscount(price: number) {
    return Math.max(price - this.discountValue, 5);
  }
}

这是ProductTable.component.ts文件

import { Component, Input } from "@angular/core";
import { Model } from "./repository.model";
import { Product } from "./product.model";
import { DiscountService } from "./discount.service";
@Component({
  selector: "paProductTable",
  templateUrl: "productTable.component.html"
})
export class ProductTableComponent {
  discounter: DiscountService = new DiscountService();
}

这是template.html文件

<div class="row m-2">
    <div class="col-8 p-2">
        <paProductTable [model]="model"></paProductTable>
    </div>
</div>

这是ProductTable.component.html文件

<paDiscountEditor [discounter]="discounter"></paDiscountEditor>

编译时出现的错误

谢谢

Answer 1

您已在 html

中将 discounter 作为输入属性

<paDiscountEditor [discounter]="discounter"></paDiscountEditor>

但是您的 PaDiscountEditorComponent 组件没有任何输入属性

您需要在此组件中添加输入属性

import { Component, Input } from "@angular/core";
import { DiscountService } from "./discount.service";

@Component({
    selector: "paDiscountEditor",
    template: `<div class="form-group">
                   <label>Discount</label>
                   <input [(ngModel)]="discounter.discount" 
                        class="form-control" type="number" />              
               </div>`
})
export class PaDiscountEditorComponent {
  @Input() discounter;
  constructor(public discounter: DiscountService) { }
}

您可以在此处了解有关在组件之间共享数据的更多信息： https://angular.io/guide/inputs-outputs

Answer 2

您在 PaDiscountEditorComponent 打字稿文件

的折扣店中缺少 @Input 属性

Angular 7 编译错误 NG8002 无法绑定对象，因为它不是已知的属性

Angular 7 compilation error NG8002 can't bind object since it isn't a known property

html

compiler-errors

typescript

angular

Angular 7 编译错误 NG8002 无法绑定对象，因为它不是已知的 属性

Angular 7 compilation error NG8002 can't bind object since it isn't a known property

html

compiler-errors

typescript

angular

Angular 7 编译错误 NG8002 无法绑定对象，因为它不是已知的属性