Angular2：视图未更新答案

【问题标题】：Angular2 : View not updatingAngular2：视图未更新
【发布时间】：2017-06-14 10:03:42
【问题描述】：

这是另一个“视图不变”问题

当我选择一个名称时，我需要更新一个组件。但是，我不知道为什么，我必须在模型更改之前选择2倍的名称。就像我第一次选择模型没有更新一样。

使用 angular 2 4.0.0 和 materializeCSS（来自 materialize 的自动完成）

那么，我想在我选择后直接显示按钮。

这部分的HTML模板：

<form>
            <i class="material-icons prefix">search</i>
            <input id="search" type="text" name="autoComplete" materialize="autocomplete" [materializeParams]="[autocompleteInit]">
        </form>
        <div *ngIf="CVSelected.getCV()">
            <button type="button" [routerLink]="['/dashboard/cv']" class="waves-effect waves-light btn">Passer à l'édition</button>
        </div>

自动完成初始化：

autocompleteInit: any = {
    data:  {Some_data_here},
    onAutocomplete: (str: string) => {
        this.dataService.GetFromString(str).subscribe(value => {
            console.log(value);
            this.CVSelected.setCV(value[0]); // This makes the button appears on my template with a get
        });
        this.changement.detectChanges(); // Tried this and other functions that does the same but doesn't work
    },
};

有人遇到过这个问题吗？如果是，有一些解决方案吗？

提前谢谢你

【问题讨论】：

在onAutocomplete处理程序中检查console.log(Zone.current.name)
找不到与 Zone.current.name 相关的库。我在哪里可以找到它？
它的 zonejs。 declare let Zone: any
declare let Zone: any 没有运行，因为我得到 Modifiers cannot appear here 错误。只做let Zone: any 导致我出现这个错误：puu.sh/wjIt1/f81ce11255.png @yurzui
这是一个例子plnkr.co/edit/lS4Aaf3q6kKaBXugcUcN你的代码应该在角度区域内执行

标签： angular angular2-template materialize

【解决方案1】：

在这种情况下，最可能的原因是执行代码超出了角度区域。为了解决这个问题，我建议你在角度区域内运行代码，例如：

constructor(private zone: NgZone) { }

autocompleteInit: any = {
  data:  {},
  onAutocomplete: (str: string) => {
     zone.run(() => {
        this.dataService.GetFromString(str).subscribe(value => {
          console.log(value);
          this.CVSelected.setCV(value[0]); // This makes the button appears on my template with a get
        });
     });
  },

【讨论】：