Angular2:视图未更新 [英] Angular2 : View not updating

问题描述

这是另一个视图不变"的问题

here is an other "View not changing" problem

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

I have a component that I need to update when I select a name. But, I don't know why, I have to select 2 times the name before the model change. It's like the 1st time I choose the model is not updated.

在materializeCSS中使用angular 2 4.0.0(来自materialize的自动完成功能)

Using angular 2 4.0.0 with materializeCSS (autocomplete coming from materialize)

示例

因此，我希望选择后直接显示该按钮.

So then, I would like to directly have the button appears once I choose.

这部分的HTML模板:

HTML Template of this part :

<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:

AutocompleteInit:

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
    },
};

有人遇到这个问题吗?如果是，有解决方案吗?

Anyone ran into this problem ? If yes, some solutions ?

提前谢谢

推荐答案

在这种情况下，最可能的原因是执行代码在角度区域之外.为了解决这个问题，我建议您在像这样的角度区域内运行代码:

The most probable cause in such cases is execution code outside angular zone. To solve it i would advice you to run code inside angular zone like:

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
        });
     });
  },

这篇关于Angular2:视图未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！