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.

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

回答1:

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

来源：https://stackoverflow.com/questions/44541579/angular2-view-not-updating

标签

angular

angular2-template

materialize