角度5-数据未显示在模板中

我使用的是Angular5,我正在努力从一个使用可观测数据的rest端点获取显示在模板上的数据。

我的组件如下

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

}

数据以ngonit方法打印到控制台,但模板中不会输出任何内容

我正试图使用此模板为sharepoint框架创建一个角度应用程序- https://github.com/maliksahil/SPFxAngularCLI

有人知道我做错了什么吗?