Estoy cambiando una propiedad de lista en el componente de mi aplicación cuando se devolvió una llamada AJAX, pero mi vista no se actualiza en consecuencia.

Aquí está el componente:

 import {Component} from '@angular/core'; import {ValuesService} from "./services/ValuesService"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [ValuesService] }) export class AppComponent { values: string[]; constructor(private valuesService: ValuesService) { this.values = ['1', '2']; } onClick() { this.valuesService.getValues().subscribe(this.onValues) } onValues(values: string[]) { for (let value of values) { console.log(value); } this.values = values // this should change the view } }

vista:

 <button (click)="onClick()">Hit Me</button> <div *ngFor="let value of values"> <h3>{{value}}</h3> </div>

Cuando hago clic en el botón, veo en la consola:

 received value1,value2,value3 app.component.ts:27 value1 app.component.ts:27 value2 app.component.ts:27 value3

Sin embargo, la vista no cambia.

¿Qué podría estar causando este problema? Aquí están mis dependencias en package.json:

 "dependencies": { "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "core-js": "^2.4.1", "rxjs": "^5.1.0", "zone.js": "^0.8.4" },

EDITAR:

La solución es cambiar:

 this.valuesService.getValues().subscribe(this.onValues)

para

 this.valuesService.getValues().subscribe(values => this.onValues(values))

se parece a this.values = línea de valores dentro de this.onValues no estaba evaluando "esto" para la aplicación, sino para la función en sí. Es algo que ver con el alcance.