Angular 2 - 使用组件选择器来显示json数组值

我正尝试使用组件选择器显示数组值，但未成功。目前，组件选择器将显示模板/模型中的每个值。我想显示模型的单个值（税）。Angular 2 - 使用组件选择器来显示json数组值

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>

来源

2017-02-20 Mason belyeu

我想你正在使用组件的{{userAccount.taxes}}'。你可以使用'{{userAccount.taxes}}'而不是' {{userAccount.taxes}}' –

目前你的问题还不清楚（至少对我而言）。你能否向你的问题添加当前产量以及预期产量。 – Alex

@Jijo Cleetus相信与否，我尝试过，最初并不起作用，但现在它起作用了。谢谢。 –

除非为UserAccount组件的模板是要提供必要的标记将税额添加到表格行，我只是简单地说e另一个表格单元格中userAccount.taxes的插值标记。

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

如果该UserAccount组件模板将包裹userAccount.taxes表格单元格，然后我就被它绑定到我的组件实现了@input装饰变量传递值。

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

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

来源

2017-09-12 17:14:00 mikedreynolds68

Angular 2 - 使用组件选择器来显示json数组值

回答

相关问题