角度2 |我无法绑定其他班级的财产 [英] Angular 2 | I can't Bind property from another class
问题描述
我无法绑定其他组件的属性.我的代码有问题吗?
还有谁能向我解释@Input()装饰器的规则是什么?
这是我的例子
documentlist.component.ts
从'@ angular/core'导入{Component，OnInit，Input};从"../../entry.service"导入{EntryService}从"../../entry.model"导入{Entry}；@零件({选择器:"app-documentlist"，templateUrl:"./documentlist.component.html"，styleUrls:['./documentlist.component.css']})导出类DocumentlistComponent实现OnInit {@Input()条目:条目；dmsfile:Entry [];构造函数(私人entryService:EntryService){}ngOnInit(){this.entryService.getData().then(dmsfile => this.dmsfile = dmsfile);}} documentlist.component.html
<！-开始documnet列表->< div class ="documentlist">< div class ="documentlist-container">< div class ="panel panel-default"><！-默认面板内容->< div class ="panel-heading clearfix">< span class ="pull-left">文档列表</span>< span class ="btn btn-primary storage-new pull-right">新的</span></div>< table class ="table active table-striped">< thead>< tr>< th>动作</th>< th> DataID</th><存储ID</th>< th所有者</th>< th> DocumentType</th>< th>参考号</th>< th>状态</th>< th>创建者</th>< th> CreatedDate</th>< th>修改的</th>< th> ModifiedDate</th></tr></thead>< tbody>< tr * ngFor =让dmsfile的文档列表" [entry] =文档列表">< td>< p>< span class ="glyphicon glyphicon-trash"</span>< span class ="glyphicon glyphicon-eye-open"</span></p></td>< td * ngFor =让documentlist.dataid的dataids"< p> {{dataids.id}}</p</td>< td * ngFor =让documentlist.storageidid为storageids"< p> {{storageids.id}}</p</td>< td * ngFor =让documentlist.storageid的ownerids"< p> {{ownerids.ownerid}}</p></td>< td>< p> {{documentlist.documenttype}}</p></td>< td>< p> {{documentlist.documentreferenceno}}</p></td>< td>< p> {{documentlist.documentstate}}</p></td>< td></p> {{documentlist.created by}}</p></td>< td>< p> {{documentlist.createddate}}</p></td>< td></p> {{documentlist.modified by}}</p></td>< td>< p> {{documentlist.modifieddate}}</p></td></tr></tbody></table></div></div></div><！-最终文档列表-> entry.model.ts
导出类条目{数据ID:[{数据ID:[{身份证号，标题:字符串，评论:字符串，releaseate:字符串，releaseversion:字符串，resourcetcode:字符串，resourcetname:字符串，createdby:字符串，createddate:字符串}]，storageid:[{身份证号，ownerid:数字，房间:字符串，内阁:弦，bin:字符串，描述:字符串，storagetype:字符串，islock:布尔值，createdby:字符串，createddate:字符串}]，文件类型:字串，documentreferenceno:字符串，描述:字符串，documentstate:字符串，个人资料:字符串，createdby:字符串，createddate:字符串，修改人:字符串，修改日期:字符串}]} 通常来说，有几种方法可以将数据从一个组件传递到另一个组件.您应该采用的方法主要取决于组件之间的关系.
@Input()
当组件之间存在父子关系时，例如:假设有两个组件 parent-component 和 child-component
现在在 parent-component 的模板代码中，您的代码可能看起来像这样-
<！-这里有更多代码--->< div>< child-component [inputData] ="inputData"></child-component></div> 在此请注意，将 inputData 传递到 child-component 中.您可能已经猜到了-应该在 parent-component 中设置右侧的 inputData ，并且 [inputData] 表示它是
您的 parent-component 的组件类将如下所示-
导出类ParentComponent {//更多代码在这里public inputData =来自父组件的输入值";} 由于我们以 @Input()的形式传递了 inputData ，所以我们必须在 child-component 中获取它:
子组件的组件类可能看起来像这样-
从'@ angular/core'导入{Input，SimpleChanges，OnChanges};//更多导入语句在这里出口类别ChildComponent {@Input()inputData:任何;公共myInputData:任何；ngOnChanges(更改:SimpleChanges){if('inputData'发生变化){this.myInputData = changes ['inputData'].currentValue;}}} 现在，您可以在模板代码中显示 myInputData ，它将始终显示从 parent-component
根据组件之间的关系，还有其他方法可以将数据从一个组件传递到另一个组件，例如 EventEmitter 和共享服务.
希望这会有所帮助.
I can't bind property from other component. is there something wrong with my codes?
and can anyone explain me what's the rule of @Input() decorator?
Here's my Example
documentlist.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { EntryService} from '../../entry.service'
import { Entry } from '../../entry.model';
@Component({
selector: 'app-documentlist',
templateUrl: './documentlist.component.html',
styleUrls: ['./documentlist.component.css']
})
export class DocumentlistComponent implements OnInit {
@Input() entry: Entry;
dmsfile: Entry[];
constructor(private entryService: EntryService) {
}
ngOnInit() {
this.entryService.getData().then(dmsfile => this.dmsfile = dmsfile);
}
}
documentlist.component.html
<!-- start documnet list -->
<div class="documentlist">
<div class="documentlist-container">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading clearfix">
<span class="pull-left">Document list</span>
<span class="btn btn-primary storage-new pull-right">
New
</span>
</div>
<table class="table responsive table-striped">
<thead>
<tr>
<th>Action</th>
<th>DataID</th>
<th>Storage ID</th>
<th>Owner</th>
<th>DocumentType</th>
<th>Ref No.</th>
<th>Status</th>
<th>Created by</th>
<th>CreatedDate</th>
<th>Modified by</th>
<th>ModifiedDate</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let documentlist of dmsfile" [entry]="documentlist">
<td>
<p>
<span class="glyphicon glyphicon-trash"></span>
<span class="glyphicon glyphicon-eye-open"></span>
</p>
</td>
<td *ngFor="let dataids of documentlist.dataid"><p>{{ dataids.id }}</p></td>
<td *ngFor="let storageids of documentlist.storageid"><p>{{ storageids.id }}</p></td>
<td *ngFor="let ownerids of documentlist.storageid"><p>{{ ownerids.ownerid }}</p></td>
<td><p>{{ documentlist.documenttype }}</p></td>
<td><p>{{ documentlist.documentreferenceno }}</p></td>
<td><p>{{ documentlist.documentstate }}</p></td>
<td><p>{{ documentlist.createdby }}</p></td>
<td><p>{{ documentlist.createddate }}</p></td>
<td><p>{{ documentlist.modifiedby }}</p></td>
<td><p>{{ documentlist.modifieddate }}</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- end document list -->
entry.model.ts
export class Entry {
dataid: [
{
dataid: [
{
id: number,
title: string,
comment: string,
releasedate: string,
releaseversion: string,
resourcetcode: string,
resourcetname: string,
createdby: string,
createddate: string
}
],
storageid: [
{
id: number,
ownerid: number,
room: string,
cabinet: string,
bin: string,
description: string,
storagetype: string,
islock: boolean,
createdby: string,
createddate: string
}
],
documenttype: string,
documentreferenceno: string,
description: string,
documentstate: string,
profile: string,
createdby: string,
createddate: string,
modifiedby: string,
modifieddate: string
}
]
}
Generally speaking, there are several ways you can pass data from one component to another. The approach you should follow will mostly depend upon the relation between the components.
@Input()
When there is a parent-child relation between the components, for example:
let's say there are two components parent-component and child-component
Now in the template code of the parent-component, your code might look like this -
<!-- more code here --->
<div>
<child-component [inputData]="inputData"> </child-component>
</div>
Notice here that the inputData is passed into the child-component. As you might have guessed - the right side inputData should be set from the parent-component and the [inputData] indicates it is a one way data-binding.
Your component class for parent-component will look like this -
export class ParentComponent {
//more code here
public inputData = "Input Value From Parent Component";
}
Since we passed the inputData as @Input(), so we must get hold of it in the child-component:
The component class for child-component might look like this -
import {Input, SimpleChanges, OnChanges} from '@angular/core';
//more import statements here
export class ChildComponent{
@Input() inputData: any;
public myInputData: any;
ngOnChanges(changes : SimpleChanges){
if('inputData' in changes){
this.myInputData = changes['inputData'].currentValue;
}
}
}
Now you can display the myInputData in your template code and it will always show the updated value passed from the parent-component
Depending on the relation between the components there are other ways to pass data from one component to another like - EventEmitter and shared service.
Hope this helps.
这篇关于角度2 |我无法绑定其他班级的财产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
