Question

我正在使用角度为5.0.5的Meteor。 Meteor使用websocket。

我经常遇到加载来自服务器的数据并且组件字段已更新但仍然查看（dom）之前没有反映更改的情况，直到我点击任何地方。

我已阅读有关变化检测和角度区域的信息。即使在更新字段后，我也会使用ChangeDetectorRef.detectChanges

调用ChangeDetectorRef.markForCheck，ApplicationRef.tick，this.zone.run(() => {...variable gets updated here})或角区域中的更新字段进行更新

调试此类问题的方法有哪些。

编辑：我已经使用了MeteorObservable（它在角度区域中运行所有内容）以及没有MeteorObservable但在角度区域中手动运行的尝试。以下是示例

组件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中的数据更新时，它都不会反映正确的IP列表。

我不是只寻找解决方案，而是寻找调试原因的方法。我准备阅读有关角度或调试角度代码的更多信息。

Answer 1

使用角度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>

如何在角度5中调试视图不更新

1 个答案: