无法绑定到“测试”，因为它不是“输入”的已知属性

Question

I have been trying to learn how to use Angular's @Input decorator and for some reason I cannot figure out what is wrong.

I have properly imported the FormsModule in my app component but I keep getting the above error. Can someone please help?

Do I have a typo somewhere that I just cannot see?

app.module.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 { }

component.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

You need to put this code in your component.html

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

and then add your component tag to the app component like:

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

Answer 2

Input tag does not have testing property binding that's why it throws below error

Can't bind to 'testing' since it isn't a known property of 'input'