Question

我在更新AJAX调用时更改了我的应用组件中的列表属性，但我的视图没有相应更新。

以下是组件：

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

视图：

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

当我点击按钮时，我确实在控制台中看到了：

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

然而，观点并没有改变。

可能导致此问题的原因是什么？这是我在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"
  },

编辑：

修复方法是改变：

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

到

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

看起来像这样。值=这里的值线.onValues没有评估＆＃34;这个＆＃34;到应用程序，但对功能本身。这与范围确定有关。

Answer 1

正如猜测......它可能是 this 。 this 的正常范围是在功能级别。所以它可能没有引用类属性。我通常使用一个解决这个问题的箭头函数。像这样：

this.productService.getProducts()
        .subscribe(products => this.products = products,
                   error => this.errorMessage = <any>error);

由于它位于箭头函数中，因此this引用了类属性。

查看此信息以获取更多信息：https://github.com/Microsoft/TypeScript/wiki/＆＃39;此＆＃39; -in-TypeScript

Angular 2没有更新HTTP get call return上的视图

1 个答案: