Angular 6：调用订阅方法时视图未更新答案

【问题标题】：Angular 6: View is not updated when Subscribe method is calledAngular 6：调用订阅方法时视图未更新
【发布时间】：2018-06-14 09:34:34
【问题描述】：

这个问题是基于这个问题（提供的解决方案不起作用）： Angular 4: Update template variable after API call [duplicate]

我正在尝试在使用 HttpClient 调用 api 后更新视图，但我的 html 模板没有更新。

product.ts

export class ProductModel {
ID:number;
Name:String;
CategoryName:String;
Price:number;
OldPrice:number;
IsNew:Boolean;
InStock:Boolean;
Image:String;

}

products.service.ts

import { Component, Injectable, Injector } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { HttpClient, HttpParams, HttpHeaders, HttpResponse, HttpErrorResponse } from '@angular/common/http';

import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { map} from 'rxjs/operators';

import { ProductModel } from 'src/app/models/product';

@Injectable()
export class ProductsService { 

  constructor(private http: HttpClient) { } 

  GetProducts(): Observable<ProductModel[]>{      
      return this.http.get<ProductModel[]>('https://myapi.com/api/products');
    } 
}

products.component.ts

import { Component, OnInit, ViewEncapsulation, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenav } from '@angular/material/sidenav';
import {MatExpansionModule} from '@angular/material/expansion';

import {Observable} from 'rxjs';
import { map } from 'rxjs/operators';

import * as $ from 'jquery';

import {ProductsService} from '../../services/products.service';

import { ProductModel } from 'src/app/models/product';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css'],
  providers: [ProductsService],
  encapsulation: ViewEncapsulation.None 
})
export class ProductsComponent implements OnInit { 
  @ViewChild('sidenav') sidenav: MatSidenav;

  public productsList = [];
  private reason:string;

  constructor(private _productsService: ProductsService, 
    private _ref: ChangeDetectorRef) {  
  }

  ngOnInit(){ 
    this.GetProducts();  
    console.log(this.productsList);
  } 

  close(reason: string) {
    this.reason = reason;
    this.sidenav.close();
  }

  GetProducts(){  
    this._productsService.GetProducts()
    .subscribe(
      response => {
        this.productsList = response; 
        this._ref.markForCheck();
        console.log(this.productsList);
      },
      error => { console.log(error) }
    );  
  }  

}

products.component.html

 <ul>
  <li *ngFor="let prod of productsList" >
    Id: {{prod.ID}} <br>
    Name: {{prod.Name}} <br>
    CategoryName: {{prod.CategoryName}} <br>
    Price: {{prod.Price}} <br>
    OldPrice: {{prod.OldPrice}} <br>
    IsNew: {{prod.IsNew}} <br>
    InStock: {{prod.InStock}} <br>
    Image: {{prod.Image}} <br>
  </li>
</ul>

package.json

{
  "name": "smak",
  "version": "0.0.0",
  "scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},
"private": true,
"dependencies": {
  "@agm/core": "^1.0.0-beta.3",
  "@angular/animations": "^6.0.4",
  "@angular/cdk": "^6.1.0",
  "@angular/common": "^6.0.4",
  "@angular/compiler": "^6.0.4",
  "@angular/core": "^6.0.4",
  "@angular/forms": "^6.0.4",
  "@angular/http": "^6.0.4",
  "@angular/material": "^6.1.0",
  "@angular/platform-browser": "^6.0.4",
  "@angular/platform-browser-dynamic": "^6.0.4",
  "@angular/router": "^6.0.4",
  "core-js": "^2.5.4",
  "hammerjs": "^2.0.8",
  "jquery": "^3.3.1",
  "rxjs": "^6.2.1",
  "zone.js": "^0.8.26"
},
  "devDependencies": {
  "@angular-devkit/build-angular": "~0.6.3",
  "@angular/cli": "~6.0.3",
  "@angular/compiler-cli": "^6.0.4",
  "@angular/language-service": "^6.0.4",
  "@types/jasmine": "~2.8.6",
  "@types/jasminewd2": "~2.0.3",
  "@types/jquery": "^3.3.2",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.2.1",
  "jasmine-core": "~2.99.1",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~1.7.1",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~1.4.2",
  "karma-jasmine": "~1.1.1",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.3.0",
  "ts-node": "~5.0.1",
  "tslint": "~5.9.1",
  "typescript": "~2.7.2"
}
}

查看我的 console.log view console log

如果您看到我的控制台日志，我的变量受到影响（订阅内）但订阅外我的变量为空。

有人遇到过同样的问题吗？我该如何解决？这是一个错误吗？

最好的问候，

【问题讨论】：

当您调用this.productsList = this.productsList.slice() 并立即将其分配给响应时会发生什么？这种强制数组获得一个全新的引用。
您的 productsList 只有两个属性：“Category”和“Products”。我看不到“id”、“name”或“CategoryName”之类的东西。我确定您在控制台中有错误
我试过了，但还是不行@Nicholas Reynolds
我用我的模型和 html 更新了问题，仍然无法工作@Eliseo
要添加到@Eliseo 的评论中，您不应该在控制台中收到任何错误，但看起来好像您正在尝试引用子数组中的属性。您可以以某种方式在模板中设置第二个 for 循环，以循环遍历 Products 数组中的每个项目 ProductsList 数组。

标签： angular typescript

【解决方案1】：

我遇到了同样的问题，在检索响应时使用这行代码解决了。

    this.changeDetector.detectChanges();

在你的情况下， getProducts 应该是这样的：

GetProducts(){  
    this._productsService.GetProducts()
    .subscribe(
      response => {
        this.productsList = response; 
        this._ref.detectChanges();
        console.log(this.productsList);
      },
      error => { console.log(error) }
    );  
  }

另一种解决方案：

检测更改时可能是区域冲突

将 NgZone 添加到您的构造函数中

constructor( 
          ...
             private zone:NgZone 
          ...
           ) {}

那么你的方法应该是这样的：

GetProducts(){  
    this._productsService.GetProducts()
    .subscribe(
      response => {
        this.zone.run(() => { // <== execute the changes in this callback.
            this.productsList = response; 
            console.log(this.productsList);
        });
      },
      error => { console.log(error) }
    );  
  }

【讨论】：

我改变了，但不幸的是它对我不起作用@Raed Khalaf
仍然不起作用...我用我的 package.json 更新了问题，也许我使用的是不稳定的版本？ @Raed Khalaf
@RaedKhalaf，请参阅我的评论。我认为问题不在于 ngZone（当您在 Angular 之外更改某些内容时正在使用 ngZone）或拼接
一个奇怪的事情，角度在 html 中创建了六个与数组大小相对应的 li，但如果你看到我的模型，他不会带来值......我没有看到任何问题 @Eliseo

【解决方案2】：

@LuisFerreira，我想你收到了一些赞 [{Category:"Cereails",Products:[{Id:1,Name:"Trigo",...},{Id:2,Name:"Maiz",...}]

所以你必须做两个 *ngFor

<ul *ngFor="let item of productList">
  <!--item is, e.g. {Category:"Cereails",Products:[{Id:1,Name:"Trigo",...} --> 
  <li *ngFor="let prod of item.Products" >
    <!-- prod is,e.g. {Id:1,Name:"Trigo",...} -->
    Id: {{prod.ID}} <br>
    Name: {{prod.Name}} <br>
    CategoryName: {{item.Category}} <br> <!--see that I use item.Category here -->
    Price: {{prod.Price}} <br>
    OldPrice: {{prod.OldPrice}} <br>
    IsNew: {{prod.IsNew}} <br>
    InStock: {{prod.InStock}} <br>
    Image: {{prod.Image}} <br>
  </li>
</ul>

忘记 ChangeDetectorRef 或 ngZone

【讨论】：

是的，这行得通...只是我的错，谢谢大家

【解决方案3】：

如果您只关心 Products 数组中的项目，您可以通过简单地选择和展平 Products 数组来避免使用两个 *ngFor 循环。

GetProducts() {  
    this._productsService.GetProducts().subscribe(response => {
        // Essentially the same as a SelectMany() in linq
        this.productsList = [].concat.apply([], response.map(p => p.Products)); 
    }, error => { console.log(error) });  
}

这使您的productsList 成为一个数组，每个元素都是一个产品。现在您可以访问产品的所有属性，并且您的模板中只有一个列表/*ngFor！

【讨论】：