小编Mat*_*ham的帖子

我正在使用Angular处理Electron应用程序,主页面应该显示从JSON文件异步加载的项目列表.

它们加载和动画很好,但为了交错动画,我调用了角度动画的查询功能.

不幸的是,这个查询返回零元素,尽管他们几乎立即成功加载了正确的动画(只是没有交错).

我怀疑这与在加载数据之前触发查询有关,但我不知道我能做些什么来解决这个问题.

相关代码包含在下面.

HTML:

<div [@itemList]="itemService.items.length">
  <div class="item-card" *ngFor="let item of itemService.items | 
  async;">
  </div>
</div>

零件:

@Component({
    selector: 'app-notes-list',
    templateUrl: './notes-list.component.html',
    styleUrls: ['./notes-list.component.css'],
    animations: [
        trigger('items', [
            transition(':enter', [
                style({ transform: 'scale(0.5)', opacity: 0 }),  // initial
                animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)',
                    style({ transform: 'scale(1)', opacity: 1 }))  // final
            ]),
            transition(':leave', [
                style({ transform: 'scale(1)', opacity: 1, height: '*' }),
                animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)',
                    style({
                        transform: 'scale(0.5)', opacity: 0,
                        height: '0px', margin: '0px'
                    }))
            ]) …