Question

我的项目只是一个简单的平均堆栈。我正在尝试将数据属性绑定到从另一个组件获取数据的组件。

任务center.component.ts

import { Component, OnInit } from '@angular/core';
import { Task } from '../task';

@Component({
  selector: 'app-task-center',
  templateUrl: './task-center.component.html',
  styleUrls: ['./task-center.component.scss']
})
export class TaskCenterComponent implements OnInit {

  tasks1: Task[] = [
    {"_id": "1", "subject": "Yeah", "description": "yey", "status": "Good"},
    {"_id": "2", "subject": "Yow", "description": "yipeee", "status": "Passed"}
  ];

  constructor() { }

  ngOnInit() {
  }

}

任务center.component.html

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-9">
      <task-detail></task-detail>
    </div>

    <div class="col-sm-3">
      <task-list [tasks1]="tasks1"></task-list>  
    </div>


  </div>

</div>

任务list.component.ts

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

@Component({
  selector: 'task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.scss'],
  inputs: ['tasks1']
})
export class TaskListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

任务一览component.html

  <li *ngFor="let task123 of tasks1">
    <a>
      {{task123.title}}
    </a>
  </li>


</ul>

任务数组存储在task-center.component.ts中。该数组将作为输入传递给task-list.component.ts。 task-list.component.ts应该显示列表。

保存后，系统会提示我：

C：/ Users / whitecap / Documents / Node Projects中的错误 SourceTree /梦角/ src目录/ $$ _ gendir /应用/组件/管理/任务/任务列表/任务list.component.ngfactory.ts （36,35）：属性'tasks1'在'TaskListComponent'类型中不存在。

感谢任何帮助。

Answer 1

我不确定你为什么评论@input，需要在TaskListComponent上，

export class TaskListComponent implements OnInit {

@Input() tasks1;

修改

您没有看到任何内容，因为您的任务对象没有名为title的属性 -

<li *ngFor="let task123 of tasks1"> <a> {{task123.description}} </a> </li>

Answer 2

您需要使用输入来获取组件的值

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

@Component({
  selector: 'task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent implements OnInit {
  @Input() tasks1;
  constructor() { }

  ngOnInit() {
  }

}

Answer 3

你必须在task-list.component.ts中使用@Input，它绑定了一个输入类型属性。

 @Input('tasks1') tasks1: Task[];

如何在Angular 4中进行数据属性绑定？

3 个答案: