[英]Angular 2 | I can't Bind property from another class
我无法从其他组件绑定属性。 我的代码有问题吗?
谁能解释给我@Input()装饰器的规则是什么?
这是我的例子
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
}
]
}
一般来说,有几种方法可以将数据从一个组件传递到另一个组件。 您应该采用的方法主要取决于组件之间的关系。
@Input()
例如,当组件之间存在父子关系时:假设有两个组件, parent-component
和child-component
现在,在parent-component
的模板代码中,您的代码可能看起来像这样-
<!-- more code here --->
<div>
<child-component [inputData]="inputData"> </child-component>
</div>
请注意,这里将inputData
传递到child-component
。 您可能已经猜到了-右侧inputData
应该从parent-component
设置,并且[inputData]
指示它是数据绑定的一种方式 。
您的parent-component
组件类将如下所示:
export class ParentComponent {
//more code here
public inputData = "Input Value From Parent Component";
}
由于我们将inputData
作为@Input()
传递,因此我们必须在child-component
获取它:
child-component
的组件类可能如下所示:
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;
}
}
}
现在,您可以在模板代码中显示myInputData
,它将始终显示从parent-component
传递来的更新值
根据组件之间的关系,还有其他方法可以将数据从一个组件传递到另一个组件,例如EventEmitter和共享服务 。
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.