角度2 |他のクラスのプロパティをバインドできません

Question

他のコンポーネントからプロパティをバインドできません。私のコードに何か問題がありますか？

誰でも@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 
     } 
    ]  
} 

Answer 1

は、一般的にはです、そこにはあるあるコンポーネントから別のコンポーネントにデータを渡すことができます。あなたが従うべきアプローチは、主にコンポーネント間の関係に依存します。

@Input（）

コンポーネント間の親子関係は、例えば、そこにある： の2つのコンポーネントparent-componentとchild-component

はのテンプレートコードで今があるとしましょうinputDataがに渡されることをここ

<!-- more code here ---> 
    <div> 
     <child-component [inputData]="inputData"> </child-component> 
    </div> 

お知らせ - parent-component、あなたのコードは次のようになりますchild-component。あなたが推測したように、右側のinputDataはparent-componentから設定し、[inputData]はone way data-bindingであることを示します。

コンポーネントクラスのchild-componentかもしれない：私たちは@Input()としてinputDataを渡されたので

export class ParentComponent { 
    //more code here 
    public inputData = "Input Value From Parent Component"; 
} 

ので、我々はchild-componentでそれを手に入れる必要があります -

parent-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; 
    } 
    } 
} 

あなたのテンプレートコードでと、それは常に別のような1つのコンポーネントからのデータを渡すために他の方法があるコンポーネント間の関係に応じて、parent-component

から渡された更新された値が表示されます - 持つEventEmitterと共有サービスを 。

これが役に立ちます。