angular2-changedetection 相关问题

*ngFor 循环中令人困惑的 Angular 行为

我对 Angular 中这个循环的行为有点困惑：一个包含 5 个字段的数组的简单 *ngFor 循环我对 Angular 中这个循环的行为有点困惑：对 5 个字段的数组进行简单的 *ngFor 循环 <div *ngFor="let field of this.fields" > <div class="block">{{ field.title }} : {{getValue(field)}}</div> </div> 函数getValue是 getValue(field) { console.log("getValue: "+ this._counter++, field.title); return field.name; } 鉴于数组只有 5 个字段，我预计函数 getValue 仅执行 5 次（或数组中的项目数），但正如您从 this fiddle 中看到的，它在第一次运行时执行 20 次，状态的任何变化都会使其再运行 10 次。（从控制台读取）事实上，当页面加载时，只有 1 个项目的数组将运行 4 次，任何状态更改都会导致它运行两次。在具有数百个数组和运行以获取数据的复杂函数的正确应用程序中，这一点变得更加明显。对于 Angular 的所有版本来说，这似乎都是相同的（至少是我从 v4-v16 测试过的版本）所以我想知道。首先，为什么它执行这么多次，其次，考虑到有一个复杂的函数来返回数据，是否有更有效的方法来循环数组？每次将函数写入 .html 中的插值时，Angular 都应该每次执行以了解“某些内容是否已更改”。当你使用变量时，Angular 会将变量的值与旧值进行比较，但如果你使用函数，Angular 应该执行该函数来获取实际值。您可以尽量减少使用 ChangeDetectionStrategy.OnPush（这有更多含义，使用前务必了解）。如果你写一个简单的，就会发生平等 {{getValue()}} getValue() { return "hello word" } 总的来说，这就是当我们有循环时我们应该避免使用 .html 中的函数的原因。如果是数组，你可以写一些像 this.fieldsExtends=this.fields.map(x=>({...x,value:this.getValue(x)})) 并且您可以迭代 fieldExtends  <div *ngFor="let field of fieldsExtends" > <div class="block">{{ field.title }} : field.value}</div> </div> 更改检测在开发服务器中运行两次，所以也许这就是 10 变成 20 的原因。在视图初始化之前运行更改检测，这可能是前 10 条记录的属性！此更改检测后再次运行，以便剩余 10 条记录的属性当您向数组中添加一行时，每个数组元素内的数据有可能已更改，因此每个 get 方法都会运行更改检测！代码 ngDoCheck main.ts:37 getValue: 0 test main.ts:37 getValue: 1 test main.ts:37 getValue: 2 test main.ts:37 getValue: 3 test main.ts:37 getValue: 4 test main.ts:42 ngAfterViewInit main.ts:37 getValue: 5 test main.ts:37 getValue: 6 test main.ts:37 getValue: 7 test main.ts:37 getValue: 8 test main.ts:37 getValue: 9 test chunk-7ESZLVZO.js?v=76da9c7e:19762 Angular is running in development mode. main.ts:50 ngDoCheck main.ts:37 getValue: 10 test main.ts:37 getValue: 11 test main.ts:37 getValue: 12 test main.ts:37 getValue: 13 test main.ts:37 getValue: 14 test main.ts:37 getValue: 15 test main.ts:37 getValue: 16 test main.ts:37 getValue: 17 test main.ts:37 getValue: 18 test main.ts:37 getValue: 19 test 堆栈闪电战如果你问是否有更好的方法，是的，信号可以用来弥补这个问题，你可以使用computed来执行复杂的计算，这些计算只有在根信号发生变化时才会被验证，因此它的控制更细粒度需要更改检测来运行更少的次数，从而提高性能这是我对信号和变化检测的理解，请持保留态度:)

angular angular2-changedetection angular-changedetection

回答 2 投票 0

布局之间的角度变化检测需要重新加载

我需要在不破坏任何逻辑的情况下更新项目的 UI（我破坏了）。在旧的 UI 身份验证（登录页面）和其余部分（身份验证后您可以访问的其他资源）中...

angular layout data-binding storage angular2-changedetection

回答 1 投票 0

角度测试和变更检测：fixture.detectChanges() 仅在测试中有效一次。为什么？

我尝试测试一个简单的组件： HTML：我尝试测试一个简单的组件： HTML： <ng-container *ngIf="lessThanTen(value) else moreThanTen"> <div class="circle" [ngClass]="{'active': isActive}" > {{value}} </div> </ng-container> <ng-template #moreThanTen> <div class="rounded-rectangle" [ngClass]="{'active': isActive}" > {{value}} </div> </ng-template> TS： export class MatchesCounterComponent { @Input() public value: number; @Input() public isActive: boolean; public lessThanTen(value: number): boolean { return value < 10; } } 并测试： describe('MatchesCounterComponent', () => { let component: MatchesCounterComponent; let fixture: ComponentFixture<MatchesCounterComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [MatchesCounterComponent], }).compileComponents(); fixture = TestBed.createComponent(MatchesCounterComponent); component = fixture.componentInstance; fixture.detectChanges(); // IF REMOVE IT ALL WORKS CORRECT }); it('should render circle if value is less than 10', () => { component.value = 5; fixture.detectChanges(); // DOESN'T WORK const compiled = fixture.nativeElement as HTMLElement; expect(compiled.querySelector('.rounded-rectangle')).toBeNull(); expect(compiled.querySelector('.circle')).not.toBeNull(); }); }); 问题：测试失败，因为变化检测器没有第二次触发问题：为什么fixture.detectChanges()在“it”块中第二次不起作用？（value未定义，但我直接改了：component.value = 5）。如果我从 beforeEach 块中删除fixture.detectChanges() - 一切正常。如果我通过 Fixture.componentRef.setInput() 设置值 - 一切正常。但我真的很感兴趣 CD 在这段代码中是如何工作的。您的组件是否使用ChangeDetectionStrategy.OnPush？如果是这样，请将其包装在测试主机中，因为测试中 OnPush 组件的更改检测存在问题。测试主机可以用作解决方法。

angular testing jestjs angular2-changedetection

回答 1 投票 0

如何在服务数据更改时动态重新渲染 Angular 组件

我正在开发一个带有侧边栏组件的 Angular 应用程序，该组件根据用户的数据显示不同的菜单项。如果用户没有，菜单应该只显示“Empresas”选项

angular typescript angular2-changedetection

回答 1 投票 0

在其他组件（无父子）关系发生更改后触发一个组件

一旦我在 cites.component.ts 中进行更改，我想触发 Analysis.component.ts 中的更改导航.service.ts @Injectable() 导出类导航服务{ 私人更新面包屑$：

angular typescript rxjs behaviorsubject angular2-changedetection

回答 1 投票 0

如何在 Angular 中使用 ngx-translate 平移对象而不强制重新渲染？

在我们的 Angular 应用程序中，我们有一个内部库，其中包含多个组件（例如标头...），我们在 Angular 应用程序中动态使用它们，并向它们传递一些属性（例如 s...

angular ngx-translate angular2-changedetection angular-changedetection

回答 1 投票 0

错误ExpressionChangedAfterItHasBeenCheckedError究竟如何与角度检测一起工作？

我读了很多文章，但仍然不明白一些角度变化检测的情况。我得到以下示例： Angular 应用程序实现了 OnInit、AfterViewInit、DoCheck、AfterViewChecked...

angular angular2-changedetection angular-lifecycle-hooks

回答 1 投票 0

Angular：错误 TypeError：this.panZoomAPI.panDelta 不是函数

我做了一个小->stackblitz <- to demonstrate my issue. I have a master component that has pan-zoom within which there's a parent component that holds some content (the children). The li...

angular typescript angular2-changedetection panzoom

回答 1 投票 0

同一组件中的多个 *ngFor trackBy 函数

我在 Angular 项目的 *ngFor 指令上添加了一些 trackBy 函数，以提高性能。有一个组件有 2 个项目列表。 trackBy 函数对于这两个列表都是相同的...

angular ngfor angular2-changedetection

回答 1 投票 0

在 Angular 中从模板检查多个表单值的正确方法是什么？

有一堆有效的搜索组合，我想禁用表单，除非输入了有效的搜索字段。目前我有一个方法 isValidSearchCombo() 我正在从 te...

angular angular2-changedetection

回答 1 投票 0

如何更新childView元素高度

我想根据最高的项目更新 *ngFor elements' 中的每个项目高度。这个想法是从 ViewChild 获取每个高度，然后将输出发送到容器，然后推送它（或通过可观察的 s ...