Как можно совместно использовать ngFor и ngif?

Question

[Ivan Stroykin]

Доброго времени суток,

можно ли как-то использовать совместно *ngFor и *ngIf?
Пример конструкции:

<tr *ngFor="let row of review.penalty" *ngIf="row.sum > 10">
    <td>{{row.name}}</td>
    <td>{{row.sum | number:'.2'}}</td>
</tr>

Такая конструкция не работает. В angularjs работало. Должны ведь были как-то правильно заменить?

Answer 1

[Алексей Зуев]

Можно
1) обернуть в ng-container

<ng-container *ngFor="let row of review.penalty">
  <tr *ngIf="row.sum > 10">
    <td>{{row.name}}</td>
    <td>{{row.sum | number:'.2'}}</td>  
  </tr>
</ng-container>

Пример

2) использовать template

<template ngFor let-row [ngForOf]="review.penalty">
  <tr *ngIf="row.sum > 10">
    <td>{{row.name}}</td>
    <td>{{row.sum | number:'.2'}}</td>  
  </tr>
</template>

Пример

Comments

[Ivan Stroykin]

Спасибо большое. Часто выручаете по вопросам с angular2 :) А что предпочтительнее использоват? ng-container или template? или это лишь дело вкуса?

[Алексей Зуев]

Иван Стройкин: Я думаю дело вкуса, если не хотите заморачиваться, то ng-container, а если хотите понять смысл звездочки, то template)

[Ivan Stroykin]

Алексей Зуев: Спасибо :)

Answer 2

[Руслан Лопатин]

Атрибут со звёздочкой - это синтаксический сахар для элемента template. Переписать можно вот так:

<template ngFor let-row [ngForOf]="review.penalty">
    <tr *ngIf="row.sum > 10">
        <td>{{row.name}}</td>
        <td>{{row.sum | number:'.2'}}</td>
    </tr>
</template>

Comments

[Ivan Stroykin]

Спасибо