Question

我一直在尝试学习如何使用Angular的@Input装饰器，由于某种原因，我无法弄清楚出了什么问题。

我已经在我的应用程序组件中正确导入了FormsModule，但是我仍然收到上述错误。有人可以帮忙吗？

我在我看不见的地方有错字吗？

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

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

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

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

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

Answer 2

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

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

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

2 个答案: