如何在Angular中添加条件属性? [英] How to add conditional attribute in Angular?

问题描述

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

In my Angular project (v6) have a table as shown below and I list the records by checking index numbers of them. I want to display all the records on the first page (5 records) and animate using Angular-Animations only the first record. The following example displays all records with animation (but I just want to animate the first row).

<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"，但是对于它们中的每一个，都列出了一个带有动画的记录或所有不带有动画的记录.有什么办法可以解决这个问题?

On the other hand, when I use *ngIf - else I have to use the same <tr/> block twice that I do not want. I also tried to use [@fadeInOnEnter]="i==0" and [attr.@fadeInOnEnter]="i === 0 ? '' : null" but for each of them, one record with animations or all records without animations are listed. Is there any way to fix this problem?

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

Update I : I had already tried to use it, but in that case my code returns as on the following. Is there any mistake for my usage on 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>

推荐答案

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

I don't know much about Angular Animation 6, in Angular 8 animation you can use some like

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添加任何属性

Yes, you create the animation from any state to 0 *=>0 not use :enter. NOTE: Sorry about my original idea using <ng-container> a ng-container don't create tag, so we can not add any attribute to a ng-container

在 stackblitz

这篇关于如何在Angular中添加条件属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！