Question

我试图使用组件选择器显示数组值但没有成功。目前，组件选择器将显示模板/模型中的每个值。我想显示模型的单个值（税）。

userAccount.component.html

In [3]: a = namedtuple('test', ['t'])                             

In [6]: b = a(1)                      

In [7]: c = a(1)                      

In [8]: b is c                        
Out[8]: False                         

In [9]: id(b)                         
Out[9]: 54740808                      

In [10]: id(c)                        
Out[10]: 88817352                     

In [11]: c in [b]                     
Out[11]: True                         

In [12]: b in [c]                     
Out[12]: True                         

In [13]: c == b                       
Out[13]: True

估计-detail.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>

Answer 1

除非UserAccount组件的模板将提供必要的标记以将税值添加到表格行，否则我只需将userAccount.taxes的插值标记放在另一个表格单元格中。

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

如果UserAccount组件的模板要将userAccount.tax包装在表格单元格中，那么我会通过将其绑定到我的组件中实现@Input的变量来传递该值装饰器。

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

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

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

1 个答案: