Angular 当使用可观察和内存服务时，交错和动画不适用

角度9，我试图从ngFor中错开项目。问题是返回对象数组的可观察对象。如果我执行

this.charts=Array.from{length:7}）

则

stagger

和

animate

动画不会出现问题

但是如果我做了

this.charts=this.getChartDataService.getData（）则根本没有动画。项目显示成功，但没有动画（没有交错或不透明度淡入）


福巴

从'@angular/animations'导入{交错、动画、触发器、转换、样式、查询、状态}；
进口{
组成部分，
奥尼特，
渲染器2，
ElementRef，
视图封装，
}从“@angular/core”开始；
从“../get chart data.service”导入{GetChartDataService}；
@组成部分({
选择器：“应用程序最近七天图表”，
templateUrl:“./last seven days chart.component.html”，
styleUrls:['./last seven days chart.component.css']，
封装：视图封装。无，
动画：[
触发器（'listAnimation'[
转换（'*=>*'，[//每次绑定值更改时
查询（':leave'，[
交错（500[
设置动画（'1s'，样式（{opacity:0}））
])
]，{可选：true}），
查询（“：输入”[
样式（{不透明度：0}），
交错（500[
设置动画（'1s'，样式（{opacity:1}））
])
]，{可选：true}）
])
])
],
})
导出类LastSevenDaysChartComponent实现OnInit{
公共海图；
建造师(
私有getChartDataService:getChartDataService，
私有渲染器：渲染器2，
二等兵el:ElementRef，
) {}
交错图（）：void{
console.log（this.el.nativeElement）；
const chartElements=this.el.nativeElement.querySelectorAll（“折线图”）；
chartElements.forEach（（el）=>el.classList.add（'.show chart'）；
}
ngOnInit（）：void{
this.charts=this.getChartDataService.getData（）；
}
}

get-chart-data.ts

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map}；
@可注射（）
导出类GetChartDataService{
私有chartDataUrl:string='api/curves'；
getData（）：可观察的{
返回this.http.get（this.chartDataUrl）；
}
构造函数（私有http:HttpClient）{}
}

内存中服务.ts

从'@angular/core'导入{Injectable}；
从“角度内存web api”导入{InMemoryDbService}；
从“./Curve”导入{Curve}；
从“./Timestamp”导入{Timestamp}；
从“时刻”导入*作为时刻；
@可注射（）
InMemoryDataService中的导出类实现InMemoryDbService{
时间戳1：时间戳={
时间戳：“12:00”，
葡萄糖水平：395
};
时间戳2：时间戳={
时间戳：“15:00”，
葡萄糖水平：200
};
时间戳3：时间戳={
时间戳：“16:30”，
葡萄糖水平：65
};
时间戳4：时间戳={
时间戳：“18:00”，
葡萄糖水平：300
};
时间戳5：时间戳={
时间戳：“23:00”，
葡萄糖水平：400
};
createCurve=（dayNumber:number）：曲线=>{
返回{
日期：矩（）.local（）.subtract（dayNumber，'days'）。格式（'MM-DD-YYYY'），
时间戳：[
这是1，
这是第2条，
这是第3条，
这是第4条，
这是第5条，
]
}
}
createDb（）{
const days:number[]=Array.from（{length:35}，（x，index）=>index）；
const curves:Curve[]=days.map（dayNumber=>this.createCurve（dayNumber））；
返回{曲线}；
}
}
这可能意味着动画在您从API获取数据之前就开始了

尝试按如下方式等待数据：

<div class="chart-body" @listAnimation *ngIf="charts | async as list">
  <div *ngFor="let chart of list" class="last-seven-days-body">
    <h1>foobar</h1>
  </div>
</div>


福巴

您甚至可以在等待时添加加载指示器

不起作用，尽管我注意到它捕捉到了“离开”动画。所以，我认为你是对的。还有什么方法可以让它等待数据呢？如果你使用一个简单的数组，而不是delayable，那么它的工作原理应该是一样的。我使用的是D3，我认为D3必须用dom手动创建图形这一事实导致了这个问题。我只是求助于使用普通的JS和css来交错项目。