错误类型错误：无法读取属性＆＃39;长度＆＃39;未定义的角动画

Question

我试图将角度动画放在我的一个用户列表中。该列表由 FOR循环（* ngFor）创建。在循环之前，我使用我的触发器[@listAnimation]="usersList.length"。 动画工作正常，但它给了一个 错误：ERROR TypeError: Cannot read property 'length' of undefined 到控制台。为什么呢？

我的HTML：

<div class="container" [@listAnimation]="usersList.length">
  <h1 class="h1 text-center mt-4" id="sectionHead">Users List</h1>

  <div *ngFor = "let user of usersList | paginate: { itemsPerPage: 4, currentPage: p}">
    <div class="row mb-2 mx-auto" id="showUserList">

      <div class="col-sm-2 p-0 text-center">

        <img *ngIf="!user.avatar == ''" src="{{photoBaseUrl}}/{{user.avatar}}" class="img-thumbnail" alt="user image" id="profilePic1">
        <img *ngIf="user.avatar == ''" src="{{photoBaseUrl}}/usergroup.png" class="img-thumbnail" alt="user image" id="profilePic2">
        <div class="overlay">
          <p class="addPicText" routerLink="/uploadProfilePic/{{user._id}}">
            <i class="far fa-user addPhIcon"></i>
            <br> 
            Update
          </p>
        </div>
      </div>

      <div class="col-sm-7">
        <div class="card-body py-0">
          <h5 class="card-title text-capitalize my-0 pt-1">{{user.name}}</h5>
          <p class="card-text text-muted p-0 m-0 font-sm">Email : {{user.email}}</p>
          <p class="card-text text-muted p-0 m-0 font-sm">Phone : {{user.phone}}</p>
          <p class="card-text text-muted p-0 m-0 text-capitalize font-sm">Active : {{user.active}}</p>         
        </div>
      </div>

      <div class="col-sm-3 pr-0 mr-0">
        <div class="w-75 mx-auto mt-2 text-uppercase">
          <p 
            routerLink="/editUser/{{user._id}}" 
            class="btn btn-outline-primary btn-block btnStyleSuccess font-xs m-0 p-1 mb-1">
            <i class="far fa-edit"></i> 
            Update
          </p>
          <p 
            (click)="openConfDialog(user._id)" 
            class="btn btn-outline-primary btn-block btnStyleDanger font-xs m-0 p-1">
            <i class="far fa-trash-alt"></i> 
            Delete
          </p>
        </div>        
      </div>
    </div>
  </div> 
  <div class="text-center text-white mt-4">
    <pagination-controls class="userListPagination" (pageChange)="p =$event"></pagination-controls>
  </div>
</div>

我的动画触发器：

export let listAnimation =  trigger('listAnimation', [
        transition('* => *', [

        query(':enter', style({ opacity: 0 }), {optional: true}),

        query(':enter', stagger('50ms', [
            animate('300ms ease-in', keyframes([
              style({opacity: 0, transform: 'translateX(-30%)', offset: 0}),
              style({opacity: .5, transform: 'translateX(0)',  offset: 0.3}),
              style({opacity: 1, transform: 'translateX(0)',     offset: 1.0}),
        ]))]), {optional: true}),

        query(':leave', stagger('50ms', [
            animate('300ms ease-out', keyframes([
              style({opacity: 1, transform: 'translateX(0)', offset: 0}),
              style({opacity: .5, transform: 'translateX(0)',  offset: 0.3}),
              style({opacity: 0, transform: 'translateX(-30%)',     offset: 1.0}),
            ]))]), {optional: true})
    ])
  ]);