Javascript Can'；t绑定到'；任务名称'；因为它不是'；t'的已知属性；应用程序单个任务'；

在angular中，我将数据从组件

任务

发送到子组件

单个任务。

在单个任务组件中，我使用

@Input

获取数据，然后尝试显示它，但不知怎的，它不起作用

来自task.component.html的代码

<li *ngFor="let task of data; let i=index;">
            <app-single-task
                    [task_name]="task.name"
                    [to_dos]="task.to_do"></app-single-task>
          </li>

单任务模板

<div class="row">
    <div class="col-md-12">
        <div class="col-md-8">
            {{ task_name }}
            <button >+</button>
        </div>
        <div *ngFor="let do of to_dos">
            <span class="col-md-8 todo">
            <input type="text" class="form-control" name="to_do" value="{{ do }}"/>
            </span>
        </div>
    </div>
</div>

---

有人能帮我找出问题所在吗。

你的app.module怎么样？@bug用app-module代码更新了问题。谢谢，我认为问题来自属性名

task\u name

，

to\u dos

。应该是驼峰风格的

taskName

，

toDos

。我通过将单个任务组件中的“@Input（）改为_-dos:[]=[]”改为“@Input（）改为_-dos:any”解决了这个问题，但仍然不知道是什么导致了这个问题。@D555:你能编辑并添加

task.component.ts

的代码吗？

<div class="row">
    <div class="col-md-12">
        <div class="col-md-8">
            {{ task_name }}
            <button >+</button>
        </div>
        <div *ngFor="let do of to_dos">
            <span class="col-md-8 todo">
            <input type="text" class="form-control" name="to_do" value="{{ do }}"/>
            </span>
        </div>
    </div>
</div>

    Uncaught Error: Template parse errors:
Can't bind to 'task_name' since it isn't a known property of 'app-single-task'.
1. If 'app-single-task' is an Angular component and it has 'task_name' input, then verify that it is part of this module.
2. If 'app-single-task' 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. ("   <!--</li>-->
          <li *ngFor="let task of data; let i=index;">
            <app-single-task [ERROR ->][task_name]="task.name" [todos]="task.to_do"></app-single-task>
          </li>
        </ul>
"): ng:///AppModule/TaskComponent.html@35:29
Can't bind to 'todos' since it isn't a known property of 'app-single-task'.
1. If 'app-single-task' is an Angular component and it has 'todos' input, then verify that it is part of this module.
2. If 'app-single-task' 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. ("  <li *ngFor="let task of data; let i=index;">
            <app-single-task [task_name]="task.name" [ERROR ->][todos]="task.to_do"></app-single-task>
          </li>
        </ul>
"): ng:///AppModule/TaskComponent.html@35:53
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24661)
    at JitCompiler._parseTemplate (compiler.js:34601)
    at JitCompiler._compileTemplate (compiler.js:34576)
    at eval (compiler.js:34477)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34477)
    at eval (compiler.js:34347)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34346)
syntaxError @ compiler.js:485
TemplateParser.parse @ compiler.js:24661
JitCompiler._parseTemplate @ compiler.js:34601
JitCompiler._compileTemplate @ compiler.js:34576
(anonymous) @ compiler.js:34477
JitCompiler._compileComponents @ compiler.js:34477
(anonymous) @ compiler.js:34347
then @ compiler.js:474
JitCompiler._compileModuleAndComponents @ compiler.js:34346
JitCompiler.compileModuleAsync @ compiler.js:34240
CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:239
PlatformRef.bootstrapModule @ core.js:5551
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:438
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:453
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
client:15

import { SingleTaskComponent } from './task/single-task/single-task.component';
// import { MatDialogModule, MatDialogRef } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    // EmailInboxComponent,
    InboxComponent,
    SidebarComponent,
    HeaderComponent,
    EmailComponent,
    EmailListingComponent,
    ReadComponent,
    SentComponent,
    ShortenPipe,
    SearchComponent,
    HighlightDirective,
    ContactComponent,
    AddressComponent,
    TimerObservableComponent,
    TimerAsyncComponent,
    TaskComponent,
    SingleTaskComponent,
    // ComposeMailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
    //MatInputModule,
    //MatAutocompleteModule,
    // MatDialogModule,
    // MatDialogRef,
    // MAT_DIALOG_DATA,
    ReactiveFormsModule,
    HttpModule,
    HttpClientModule,
    AppRoutingModule
  ],
  // entryComponents: [ ComposeMailComponent ],
  providers: [UserService, EmailFolderService, EmailService, TaskService],
  bootstrap: [AppComponent]
})
export class AppModule { }