無法系結到“data”，因為它不是“app-child”的已知屬性。（角12）

我正在使用 angular 12。我只是想在子組件和父組件之間進行通信。子組件從具有 @Input 變數的基礎組件擴展而來，該變數將從父組件接收資料。用戶從父組件模板 html 輸入資料，然后將其傳遞給子組件。沒有基礎組件，它的作業正常。但是我想使用基礎組件，所以以后的基礎組件可以作為超類提供給將來可能出現的其他類。

請找到stackblitz專案：https ://stackblitz.com/edit/angular-ivy-irq47l

有人可以幫助解決這個問題。

我看到的錯誤是

Error in src/app/app.component.html (4:12)
Can't bind to 'data' since it isn't a known property of 'app-child'.
1. If 'app-child' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'app-child' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

下面是片段：

應用程式組件.html

<input #newFruit type="text" placeholder="Enter a new fruit" />
<button (click)="addFruit(newFruit.value)">Add Fruit</button>

<app-child [data]="fruits"></app-child>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  fruits = ['Mengo', 'Orange', 'Banana'];

  constructor() {}

  addFruit(item: string) {
    this.fruits.push(item);
  }
}

子組件.ts

import { Component, OnInit, Input } from '@angular/core';
import { BaseComponent } from '../base/base.component';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
})
export class ChildComponent extends BaseComponent implements OnInit {
  //@Input() data: string[] | undefined;

  ngOnInit(): void {}
  constructor() {
    super();
  }
}

子組件.html

<h1>Fruit List</h1>
<ul>
  <li *ngFor="let item of data">{{ item }}</li>
</ul>

基礎.component.ts

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

@Injectable()
export abstract class BaseComponent implements OnInit {
  @Input() data: string[] | undefined;
  constructor() {}

  ngOnInit(): void {}
}

包.json

{
  "name": "angular",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.5",
    "@angular/common": "^12.2.5",
    "@angular/compiler": "^12.2.5",
    "@angular/core": "^12.2.5",
    "@angular/forms": "^12.2.5",
    "@angular/platform-browser": "^12.2.5",
    "@angular/platform-browser-dynamic": "^12.2.5",
    "@angular/router": "^12.2.5",
    "rxjs": "^7.3.0",
    "tslib": "^2.3.1",
    "zone.js": "^0.11.4"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^12.1.1",
    "@angular-devkit/build-angular": "~12.2.0",
    "@angular/cli": "~12.2.0",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5"
  }
}

uj5u.com熱心網友回復：

您@component在基本組件宣告中缺少裝飾器。

你base.component.ts應該是這樣的：

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

@Component({
  selector: 'app-base',
  template: ``
})
export abstract class BaseComponent implements OnInit {
  @Input() data: string[] | undefined;
  constructor() {}

  ngOnInit(): void {}
}

標籤：有角的

上一篇：更改路線不會在移動設備上滾動到螢屏頂部

下一篇：如何在fastAPI中為<inputtype="file">定義REST端點（并使其與angular一起使用）？