Как сделать привязку свойства данных в Angular 4?

Question

Мой проект - это просто средний стек.Я пытаюсь выполнить привязку свойства данных к компоненту, который получает данные от другого компонента.

task-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() {
  }

}

task-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>

task-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() {
  }

}

task-list-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 /dream-angular / src / $$ _ gendir / app / components / admin / tasks / список задач / task-list.component.ngfactory.ts (36,35): Свойство tasks1 не существует в типе TaskListComponent.

Любая помощь приветствуется.

Answer 1

Вы должны использовать @Input в task-list.component.ts, который ограничивает свойство типа ввода.

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

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

Я не уверен, почему вы прокомментировали @input, который должен быть там в TaskListComponent,

export class TaskListComponent implements OnInit {

@Input() tasks1;

РЕДАКТИРОВАТЬ

Вы ничего не видитепотому что у вашего объекта задачи нет свойства с именем title -

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