我不明白角度触发表达式的工作原理

Question

我有一个Form1.cs，上面放了一个动画触发器。似乎无论我在触发器表达式中写什么，表的标题行都会变得生动起来。例如，我尝试了mat-table，[@listAnimation]="afawgaw"（一旦发出http请求，[@listAnimation]="gunPosts.length > 100"的长度为3）。我也尝试删除触发器表达式：gunPosts。没关系，仍然会动画。怎么样？

另一方面，表格主体行似乎仅在我在表达式中使用[@listAnimation]（例如gunPosts.length或[@listAnimation]="gunPosts.length"）时才变得生动起来。他们不会获得[@listAnimation]="gunPosts.length > 2"的动画效果（因为它是错误的？）。

为什么触发器表达式导致表的标题和主体的结果不同？我的代码如下。

我的HTML：

[@listAnimation]="gunPosts.length > 3"

这是我的动画：

<div id="gun-table-container" >
  <div id="gun-table" class="mat-elevation-z8">
    <table [@listAnimation] mat-table [dataSource]="gunPosts" multiTemplateDataRows>
      <ng-container matColumnDef="{{key}}" *ngFor="let key of tableHelperKeys">
        <th mat-header-cell *matHeaderCellDef>{{tableHelper.get(key)}}</th>
        <ng-container *ngIf="key != 'thumbnail'; else thumbnail">
            <td mat-cell *matCellDef="let gun">{{gun[key]}}</td>
        </ng-container>
        <ng-template #thumbnail>
            <td mat-cell *matCellDef="let gun"><img src="{{gun.images[0].thumbnail_image_url}}" class="thumbnails"></td>
        </ng-template>
      </ng-container>
      <ng-container matColumnDef="expandedGun">
        <td mat-cell *matCellDef="let gun" [attr.colspan]="tableHelperKeys.length">
          <div class="expansion-div" [@expandAnimation]="gun == expandedGun ? 'expanded' : 'collapsed'">
            <div class="expansion-left"  [innerHTML]="gun.content.rendered">
            </div>
            <mat-divider></mat-divider>
            <div class="expansion-right">
              <div class="gallery-container" #buttonIcon >
                <div class="img-container" *ngFor="let img of gun.images" (click)="openFullscreen(img)">
                  <img [src]="img.thumbnail_image_url" class="gun-img">
                </div>
              </div>
            </div>
          </div>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="tableHelperKeys; sticky: true"></tr>
      <tr mat-row *matRowDef="let gun; columns: tableHelperKeys;" class="row" [class.expanded]="expandedGun === gun"
        (click)="expandedGun = gun">
      </tr>
      <tr mat-row *matRowDef="let gun; columns: ['expandedGun']" class="expansion-row" [class.expanded]="expandedGun === gun"></tr>
    </table>
  </div>
</div>