无法绑定到"测试"，因为它不是'input'的已知属性

Question

我一直在尝试学习如何使用Angular的@Input装饰器，但由于某种原因，我无法找出问题所在。

我已经在我的应用程序组件中正确导入了FormsModule，但我一直收到上面的错误。有人能帮忙吗？

我是不是在看不见的地方打错了字？

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RecipeComponent } from './components/recipe/recipe.component';
@NgModule({
declarations: [
AppComponent,
RecipeComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

组件.ts

import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-recipe',
templateUrl: './recipe.component.html',
styleUrls: ['./recipe.component.css']
})
export class RecipeComponent implements OnInit {
@Input() testing;

component.html

<ul class="ingredient-list">
<li *ngFor="let list of lists; let i = index;"><input type="checkbox" [testing]="list.checked" (click)="verifyAllChecked(i)" >{{list.quantity}}<br>{{list.item}}</li>
</ul>
{{testing}}

Answer 1

您需要将此代码放入component.html 中

<input type="checkbox" (click)="verifyAllChecked(i)" >

然后将您的组件标签添加到应用程序组件中，如：

<app-recipe [testing]="list.checked" ></app-recipe>

Answer 2

Input标记没有测试属性绑定，这就是它抛出错误以下的原因

无法绑定到"testing"，因为它不是"input"的已知属性