Question

在我的Angular项目（v6）中，有一个如下所示的表，我通过检查记录的索引号来列出记录。我想在第一页上显示所有记录（5条记录），并仅使用Angular-Animations进行动画处理。下面的示例显示所有带有动画的记录（但我只想为第一行设置动画）。

<ng-template pTemplate="body" let-row let-i="rowIndex">
    <tr *ngIf="i==0" [@fadeInOnEnter]>
        <td>
            <a [routerLink]="['/detail/']">{{ row.Title }}</a>
        </td>
        <!-- other stuffs -->
        <td>
            <!-- ... -->
        </td>
    </tr>
</ng-template>

另一方面，当我使用*ngIf - else时，我必须使用两次我不想使用的<tr/>块。我也尝试使用[@fadeInOnEnter]="i==0"和[attr.@fadeInOnEnter]="i === 0 ? '' : null"，但是对于其中的每一个，列出了一个带有动画的记录或所有不带有动画的记录。有什么办法可以解决这个问题？

更新I： 我已经尝试使用它，但是在这种情况下，我的代码返回如下。我在Update I上使用时是否有任何错误？

<ng-template pTemplate="body" let-row let-i="rowIndex"> 
    <ng-container *ngIf="i==0; then fadeBlock else elseBlock">

        <ng-container #fadeBlock>
            <tr [@fadeInOnEnter]> <!-- tr WITH animation -->
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </ng-container>

        <ng-container #elseBlock>
            <tr>  <!-- tr WITHOUT animation -->
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </ng-container>

    </ng-container>            
</ng-template>

Answer 1

您可以使用三元条件。

<tr [@fadeInOnEnter]="condition ? '' : null"></tr>

这样，如果条件为空字符串（''），则将其应用。

Answer 2

我对Angular Animation 6不太了解，在Angular 8动画中您可以使用类似

animations: [

    trigger('simpleFade', [
      transition('*=>0', [
        style({ transform: 'translateX(+100%)' }),
        animate(350)
      ])])]

和

<table>
  <tr *ngFor="let data of list;let i=index" [@simpleFade]="i">
    <td >{{data}}</td>
  <tr>
</table>

是的，您从任何状态到0 *=>0都不使用：enter来创建动画。注意：很抱歉使用<ng-container>的ng-container不能创建标签，所以我们不能向ng-container添加任何属性

在stackblitz中查看简单的动画

如何在Angular中添加条件属性？

2 个答案: