在angular 6中结合使用trackBy和ngFor提高性能 <app-analysis-item *ngFor="let element of analyses"
[analysis]="element"
(deleteAnalysisEvent)="onAnalysisDeleted($event)">
</app-analysis-item>
If yes why angular team don't say that ??
我生成了16个单元格,理想的情况是,单击每个单元格,当圆元素进入和离开时,都会显示一个带有动画的圆。在这种情况下,我遇到了两个问题: 1)当圆圈离开时,转换不起作用。2)快速添加和删除一个圆有时会导致另一个圆重新渲染。
app.component.html
<div class="card">
<div class="circlecell" *ngFor="let circle of circles; let i=index" data-id="{{i}}" (click)="OnShow(i)
嗨,你们好,我想不通了。我正在向数组中添加元素,但是我的dom不会更新,除非我刷新页面。我在一个单独的组件中使用trackBy,它工作得很好,但在这个较新的组件上,它根本不能工作。 这是我的html <div class="accordion" id="accordionExample">
<div class="card" *ngFor="let grocery of groceryList;trackBy:trackByIdCode; index as index;">
<div c
我有一个巨大的ngFor,经常使用异步数据进行更改。TrackBy只允许刷新更改的部分,当我添加它时,我真的感觉到了不同。例如,在我看来,让一个trackBy返回一个唯一的ID有什么好处。但我有时会看到样本返回当前索引。
public trackByFn(index, item) { return index }
在我的表中,如果我直接返回'index‘或'item.id’,我不会注意到有什么不同。两者似乎都优化了渲染(但我可能没有捕捉到一些被窃听的边框情况)。
那么,有人能解释一下当我返回索引时到底发生了什么吗?
我的Range4应用程序有一个组件,它有一个refresh方法可以从我的web服务中提取一个大对象,如下所示:
DTO/模型类型:
class NuclearReactorStatus {
public reactorName: string;
public coolingRods: CoolingRodStatus[]; // array of 1024 elements
}
class CoolingRodStatus {
public rodId : number;
public temperature: number;
public
这是我的模板:
<div *ngFor="let d of data; let i=index">
<select [(ngModel)]="d.dob" name="dob-{{i}}">
<option *ngFor="let d of [1990, 1991, 1992]">
{{d}}
</option>
</select>
<i cla
我有一个简单的列表,它将双向绑定到hero.component.ts.中的参数英雄。
尽管,当我开始键入输入字段时,它失去了焦点,,我不得不再次单击它。我该怎么做才能让用户编辑输入值而不让输入字段丢失目标呢?
<li *ngFor="let power of hero.powers; let i = index">
<input [(ngModel)]="hero.powers[i]"/>
</li>
我有一个接收对象数组的自定义管道。此管道遍历数组中的每个对象,并修改该对象的“name”属性以限制显示的字符数: `
transform(gearImages: GearImage[]): GearImage[] {
let viewImagesArr: GearImage[] = [];
for (let index = 0; index < gearImages.length; index++) {
let viewImage = Object.assign({}, gearImages[index]);
vi