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

问题描述

这是另一个视图未更改"问题

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

使用带有 materializeCSS 的 angular 2 4.0.0(来自 materialize 的自动完成)

示例

那么，我想在我选择后直接让按钮出现.

这部分的HTML模板:

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

自动完成初始化:

autocompleteInit: any = {数据:{Some_data_here}，onAutocomplete: (str: string) =>{this.dataService.GetFromString(str).subscribe(value => {控制台日志(值)；this.CVSelected.setCV(value[0]);//这使得按钮出现在我的模板上，并带有一个 get});this.changement.detectChanges();//尝试了这个和其他功能相同但不起作用的功能},};

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

提前致谢

解决方案

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

constructor(private zone: NgZone) { }自动完成初始化:任何 = {数据:  {}，onAutocomplete: (str: string) =>{zone.run(() => {this.dataService.GetFromString(str).subscribe(value => {控制台日志(值)；this.CVSelected.setCV(value[0]);//这使得按钮出现在我的模板上，并带有一个 get});});},

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.

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

Example

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

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

Thank you in advance

解决方案

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屋！