如何调试视图未在角度 5 中更新答案

【问题标题】：How to debug view not updating in angular 5如何调试视图未在角度 5 中更新
【发布时间】：2018-08-18 20:02:21
【问题描述】：

我正在使用 Angular 5.0.5 的 Meteor。 Meteor 使用 websocket。

我经常遇到从服务器加载数据并且组件字段已更新但视图（dom）仍然没有反映更改的情况，直到我单击任意位置。

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

有什么方法可以调试这类问题。

编辑：我已经使用了 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 列表。

我不仅在寻找解决方案，还寻找一种调试它发生原因的方法。我已准备好阅读更多有关 Angular 或调试到 Angular 代码的信息。

【问题讨论】：

如何从服务器获取数据？除非您禁用了区域，否则它应该会自动发生。
我没有禁用区域，我正在通过流星框架实现的 websocket 获取数据。它有时会发生，我想知道一种调试的好方法。我已经准备好深入研究相关的角度代码了。
你能用meteor-rxjs创建一个复制品吗？
我只能在我的代码库中重现。当我试图通过仅取出相关代码来重现样本时，它正在工作！对于现在的解决方法，我已经模拟了一次点击，但仍然有兴趣了解根本原因。 @Urigo

标签： angular meteor angular-meteor

【解决方案1】：

利用 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({});
}

组件.js

categories: ObservableCursor<ProductCategories>;
constructor(){
    // Below should probably be set on ngOnInit()
    this.categories = this.productService.getCategories();
}

组件.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>

【讨论】：

我已更新问题以添加更多详细信息。非常感谢