Question

我有一个Angular2组件（PropertyComponent），它与一个引导表的每一行的属性选择器一起使用：

<tbody>
  <tr app-property *ngFor="let property of properties" [property]="property"></tr>
</tbody>

我想通过添加基于属性对象内容的类来设置<tr>行的样式。我不能这样做，因为我想将样式逻辑放入PropertyComponent。我可以更改代码以使用组件选择器：

<tbody>
  <app-property *ngFor="let property of properties" [property]="property"></app-property>
</tbody>

并将<tr>标记放入组件模板中，但这会导致格式问题，因为额外的<app-property>标记会围绕表格行。

PropertyComponent包含：

<td>{{property.key}}</td>
<td>{{property.value}}</td>
...

有解决这个问题的好方法吗？

Answer 1

基于runs = [row['run'] for i, row in df.iterrows()] var_obj = VariantSampleRun.objects.filter(sample=current_sample, hts_run__in=runs).select_related('variant').order_by('variant')，您可以使用[ngClass]指令来应用适当的类。这是更新的代码：

property

我已将<table> <tbody *ngFor="let property of properties" app-property [property]="property"> </tbody> </table>放入*ngFor，它会将每一行放在<tbody>标记中。它可能看起来像一个丑陋的解决方案，但它将为您的案件服务。

我不知道你的<tbody>看起来如何，但我会用最少的代码重新生成它：

PropertyComponent

我使用@Component({ selector: '[app-property]', template: ` <tr [ngClass]="getPropertyRowStyle()"> <td>{{property.key}}</td> <td>{{property.value}}</td> </tr> `, styles: [` .class-one{ color:red; } .class-two{ color:green; } `] }) export class PropertyComponent { @Input() property: any; getPropertyRowStyle(){ // implement your logic here to return the appropriate class. // e.g. if(this.property.key === 'one') { return 'class-one'; } else if(this.property.key === 'two') { return 'class-two'; } } }方法根据getPropertyRowStyle()值获取[ngClass]。您可以在该方法中实现自己的逻辑。另外，我已根据需要将property标记放在组件中。

以下是工作PLUNKER DEMO

的链接

Answer 2

听起来你正在寻找HostBinding，它允许你绑定角度组件的父元素中的属性。

@HostBinding('class.some-class') someClass = true;

请注意，将其设置为true将应用它。

Answer 3

如果我理解你的问题，那就是你要找的：

<tbody>
  <tr *ngFor="let property of properties">
    <app-property [property]="property"></app-property>
  </tr>
</tbody>

这样您就可以访问property代码上的<tr></tr>。所以你可以做这样的事情

<tbody>
  <tr *ngFor="let property of properties" [class.active]="property.name === 'potato">
    <app-property [property]="property"></app-property>
  </tr>
</tbody>

angular2 ngfor子组件元素

3 个答案: