각도 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

UserAccount 구성 요소에 대한 템플릿을 제공하려고하지 않는

<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

테이블 행에 세금 값을 추가하는 데 필요한 마크 업, 나는 단순히 plac 다른 테이블 셀 내의 userAccount.taxes에 대한 보간 마크 업. UserAccount 구성 요소 의 템플릿이 테이블 셀에 userAccount.taxes을 포장려고하는 경우에

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

후 나는 @Input 데코레이터를 구현하는 내 구성 요소의 변수에 바인딩하여 값을 전달할 것 .

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

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