Angular 5-數據未顯示在模板中

Question

我正在使用角度5，並且正在努力使可觀察到的數據從其余端點顯示在模板上。

我的組件如下

import { Component, OnInit, Input } from '@angular/core';
import { NewsService } from './news.service';
import { NewsItem } from './newsItem.model';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-news',
  //templateUrl: './news.component.html',
template: `
  <ul>
      <li *ngFor="let newsItem of newsItems">{{newsItem}}</li>
  </ul>
  <h3 *ngIf="newsItems"> {{ newsItems }} </h3> 

  <h3 *ngIf="test"> test: {{ test | async}} </h3>`,
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {

  newsItems: NewsItem[];
  test : string;

  constructor(private newsService: NewsService) { 
    this.newsItems = [];
  }

  ngOnInit() {

    this.newsService.getLatestNews().subscribe(
      data => {
        console.log('1 Component Data:', data);
        data.forEach(function (newsItem) {
          console.log('2 Component Data:', newsItem);
        });

        this.newsItems = data;
        this.test = 'Hello';
        console.log('3 Component newsItems:', this.newsItems);
        console.log('4 Component test:', this.test);
      }
    );
  }

}

我的服務如下

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpRequest } from '@angular/common/http';
import 'rxjs';
import { NewsItem } from './newsItem.model';
import { Observable } from 'rxjs';

@Injectable()
export class NewsService {

  newsEndpoint:string = 'http://myendpoint.com/services/news';

  constructor(private httpClient: HttpClient) { }

  getLatestNews(): Observable<NewsItem[]>{
       return this.httpClient.get<NewsItem[]>(this.newsEndpoint, {
          observe: 'body',
          responseType: 'json'
        });
  }

}

數據正在使用ngOnInit方法打印到控制台，但模板中將不會輸出任何內容

我正在嘗試使用此模板為共享點框架創建一個角度應用程序-https: //github.com/maliksahil/SPFxAngularCLI

誰能看到我在做什么錯？

Answer 1

使用ChangeDetectorRef

 constructor(private newsService: NewsService,private cdr:ChangeDetectorRef) { 
    this.newsItems = [];
  }

  ngOnInit() {

    this.newsService.getLatestNews().subscribe(
      data => {
        console.log('1 Component Data:', data);
        data.forEach(function (newsItem) {
          console.log('2 Component Data:', newsItem);
        });

        this.newsItems = data;
        this.cdr.detectChanges()
        this.test = 'Hello';
        console.log('3 Component newsItems:', this.newsItems);
        console.log('4 Component test:', this.test);
      }
    );
  }

}