如何使用angular2

Question

我個人頁面指令

<person-directive *ngFor="let person of persons; #idx = index" (remove) = "removePerson(idx)"> 
    </person-directive> 

而且人指令讀取其主控制器指令模型值有下面列出了一些輸入字段。我想訪問個人頁面控制器中的那些輸入值。

<div class="group"> 
      <label class="person-involved-name">Name</label> 
      <div class="textContainer"><input type="text" value="" name="nameSelect_1" id="nameSelect_1" [(ngModel)]="personData.nameSelect_1" class="txt-box"></div> 
     </div> 
     <div class="group"> 
      <label class="person-involved-aliasname">Alias Name</label> 
      <div class="textContainer"><input type="text" value="" name="aliasNameSelect_1" id="aliasNameSelect_1" [(ngModel)]="personData.aliasNameSelect_1" class="txt-box"></div> 
      <div><br class="clr"></div> 
     </div> 

personDirective.ts定義如下。

export class PersonDirective { 
public personData; 

}

和person.ts定義如下。

export class PersonInvolvedComponent { 
    persons: Array<PersonDirective> = []; 
    constructor(private router: Router, 
       private _globalService:GlobalService) { 
     this.persons.push(new PersonDirective()); 
} 

} 

我能夠訪問directive.ts文件中的那些輸入值，但不能訪問PersonInvolvedComponent.ts文件中的那些輸入值。我只能看到「personData」對象，而不是添加到它的實際輸入值。我怎樣才能訪問它。請建議我。

Answer 1

我認爲在角度-2這是不可能在指令的幫助下呈現HTML，所以你可以使用該組件進行渲染和做一些東西。

爲了更好地實現上面說的情況，請按照下列步驟

1. 使用@Component裝飾創建組件，並給予選擇的值作爲人 @component({ moduleId: module.id, selector : 'person', templateUrl : './person.html' }) export class PersonInvolvedComponent { // do the needed stuffs }
2. 複製所需要的人的HTML代碼detaila並粘貼在.html文件中。

3. 現在根據您的需要使用選擇器（人）。

   <div *for="let person of personDetails"> 
       <person [neededInput]="person" (output)="neederStuffs()" > </person> 
   </div> 
   

試試這個，恢復我，如果您有任何疑問

Answer 2

檢查它應用更改後如下：

//人改換

<person-directive *ngFor="let person of persons; #idx = index" (remove)="removePerson(idx)" [data]="person" ></person-directive> 

// personDirective .ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector : 'person-directive', 
    templateUrl: './person-directive.html' 
}) 
export class PersonDirective { 
    @Input() public data: any;  
} 

//person-directive.html

<div class="group"> 
    <label class="person-involved-name">Name</label> 
    <div class="textContainer"><input type="text" value="" name="nameSelect_1" id="nameSelect_1" [(ngModel)]="data.nameSelect_1" class="txt-box"></div> 
</div> 
<div class="group"> 
    <label class="person-involved-aliasname">Alias Name</label> 
    <div class="textContainer"><input type="text" value="" name="aliasNameSelect_1" id="aliasNameSelect_1" [(ngModel)]="data.aliasNameSelect_1" class="txt-box"></div> 
    <div><br class="clr"></div> 
</div>