角度2 - コンポーネントセレクタを使用してjson配列値を表示する

Question

コンポーネントセレクタを使用して配列値を正常に表示しようとしています。現在、コンポーネントセレクタはテンプレート/モデルのすべての値を表示します。私はモデルの単一の値（税金）を表示したいと思います。

userAccount.component.html

  <div *ngFor="let userAccount of UserAccounts" [class.active]="userAccount === selectedUser" (click)="onSelect(userAcccount)"> 
       <div class= 'col-md-12'> 
        <input class = "form-control"[(ngModel)] = "userAccount.firstName" placeholder= "First Name" /> 
        <input class = "form-control"[(ngModel)] = "userAccount.LastName" placeholder= "Last Name" /> 
         <input class = "form-control"[(ngModel)] = "userAccount.email" placeholder= "Email" /> 
         <br> <div class= 'col-md-12'>Region</div> <hr> 
          <input class = "form-control"[(ngModel)] = "userAccount.region" placeholder= "Region" /> 
          <input class = "form-control"[(ngModel)] = "userAccount.taxes" placeholder= "Tax Rate" /> 

    <br>  
     <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <br> 
     <button (click)="goBack()" class="btn btn-default">Back</button> 
     <button (click)="save()" class="btn btn-primary">Save</button> 
    </div> 

推定-detail.component.html

<tr *ngFor ="let userAccount of UserAccounts"> 
      <td class="table-borderless" colSpan="4" class="text-right"><b>Tax</b></td> 
      <app-userAccount>{{userAccount.taxes}}</app-userAccount>  
     </tr> 

Answer 1

UserAccountのコンポーネントのためのテンプレートが提供しようとしている場合を除き税の値をテーブルの行に追加するために必要なマークアップ、私は単にplac e別の表セル内のuserAccount.taxesの補間マークアップ。

<td class="table-borderless" colspan="n">{{ userAccount.taxes }}</td> 

UserAccountのコンポーネントのテンプレートがはその後、私は@Inputデコレータを実装して、私のコンポーネントでそれを変数に結合することによって値を渡す、テーブルセルにuserAccount.taxesをラップしようとしている場合。

<app-userAccount [taxes]='userAccount.taxes'></app-userAccount> 

export class UserAccount { 
    @Input() taxes: String; 
    rest of component...