[英]How to do data property binding in Angular 4?
My project is just a simple mean stack. 我的项目只是一个简单的均值堆栈。 I am trying to do data property binding to a component that gets data from another component.
我正在尝试将数据属性绑定到从另一个组件获取数据的组件。
task-center.component.ts 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 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 任务列表.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 task-list-component.html
<li *ngFor="let task123 of tasks1">
<a>
{{task123.title}}
</a>
</li>
</ul>
The array of tasks is stored in task-center.component.ts. 任务数组存储在task-center.component.ts中。 The array will be passed as an input to task-list.component.ts.
该数组将作为输入传递给task-list.component.ts。 task-list.component.ts should display the list.
task-list.component.ts应该显示列表。
After saving, i am prompted with: 保存后,提示我:
ERROR in C:/Users/whitecap/Documents/Node Projects SourceTree/dream-angular/src/$$_gendir/app/components/admin/tasks/task-list/task-list.component.ngfactory.ts (36,35): Property 'tasks1' does not exist on type 'TaskListComponent'.
C:/ Users / whitecap / Documents / Node Projects SourceTree / dream-angular / src / $$ _ gendir / app / components / admin / tasks / task-list / task-list.component.ngfactory.ts(36,35中的错误):属性“ tasks1”在“ TaskListComponent”类型上不存在。
Any help is appreciated. 任何帮助表示赞赏。
I am not sure why you have commented @input, that needs to be there on the TaskListComponent , 我不确定为什么要在TaskListComponent上添加@input注释,
export class TaskListComponent implements OnInit {
@Input() tasks1;
EDIT 编辑
You are not seeing anything because your task object does not have property named title – 您没有看到任何内容,因为您的任务对象没有名为title的属性–
<li *ngFor="let task123 of tasks1">
<a>
{{task123.description}}
</a>
</li>
You need to use input inorder to get value to the component 您需要使用输入才能获得组件的价值
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() {
}
}
您必须在task-list.component.ts中使用@Input,它限制了输入类型属性。
@Input('tasks1') tasks1: Task[];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.