如何调试angular 5中未更新的视图
我使用的是angular 5.0.5的Meteor。Meteor使用websocket。
我经常遇到这样的情况:从服务器加载数据，更新组件字段，但在我单击任意位置之前，view(dom)仍然没有反映更改。
我读过关于变化检测和角度区域的文章。即使在更新字段后，使用this.zone.run(() => {...variable gets updated here})调用了ChangeDetectorRef.detectChanges、ChangeDetectorRef.markForCheck、ApplicationRef.tick或角度区域中的更新字段，视图也会进行更新
有什么方法可以调试这类问题。
编辑:我在没有MeteorObservable的情况下也使用了MeteorObservable(它可以在angular zone中运行所有东西)，但在angular zone中手动运行。下面是示例
组件js文件(changeDetection设置为ChangeDetectionStrategy.OnPush)
ngOnInit() {
Tracker.autorun(() => {
this.company = Companies.findOne();
this.zone.run(() => {
if(this.company) this.excluded_ips = this.company.excluded_ips;
//here i have also tried detectChanges(), markForCheck() appref.tick() as well
});
});
}使用另一个库的组件模板(ngx-chips)
<tag-input
theme='minimal'
inputClass="tag_input"
[placeholder]="ip_placeholder"
[validators]="validators"
[errorMessages]="errorMessages"
[modelAsStrings]="true"
[ngModel]="excluded_ips"
(onRemove)="onExcludedIPRemoved($event)"
(onAdd)="onExcludedIPAdded($event)" #input>
</tag-input>无论何时更新excluded_ips中的数据，它都不会反映正确的in列表。
我不仅在寻找一种解决方案，还在寻找一种调试为什么会发生这种情况的方法。我已经准备好阅读更多关于angular或调试到angular代码的内容。
回答 1
Stack Overflow用户
发布于 2018-03-14 03:10:43
使用Angular的var | async管道，我还推荐使用MeteorObservable来处理Angular 2+，我几乎可以肯定您正在使用它。
你能发布一个代码的例子吗？
Service.js
public getCategories(): ObservableCursor<ProductCategories> {
if (!!this.categoriesSubscription) {
this.categoriesSubscription.unsubscribe();
}
this.categoriesSubscription = MeteorObservable.subscribe('categories').subscribe();
return CategoriesCollection.find({});
}Component.js
categories: ObservableCursor<ProductCategories>;
constructor(){
// Below should probably be set on ngOnInit()
this.categories = this.productService.getCategories();
}Component.html
<md-select placeholder="Categoría" class="clean lookupCategory" [formControl]="categoryId" flex="50"><md-option [value]="''">Todos</md-option><md-option *ngFor="let cat of categories | async" [value]="cat._id">{{ cat.name }}</md-option></md-select>https://stackoverflow.com/questions/49207477
复制相似问题
腾讯云开发者
