Angular：No Error但不在View中显示数据

Question

我有使用Github API的非常简单的代码。我的控制台中没有错误，但数据进入我的控制台但无法在View中显示。有人，请帮帮我。我无法理解。

服务类：

import {
    Injectable
} from '@angular/core';
import {
    Http
} from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class GithubService {
    constructor(private http: Http) {}
    getUser(searchKey) {

        const url = 'https://api.github.com/search/users?q=' + searchKey;
        return this.http.get(url).map(res => res.json())
    }
}

我在Component中调用的方法。

getUser(value) {
    return this.gitHubService.getUser(value)
        .subscribe(results => {
            this.results = this.results;
            console.log(value);
            console.log(results);

        });
}

这是我的观点html。

<div>
    <br /><br />
    <br /><br /><br /> Enter Value: <input type="text" [(ngModel)]="searchKey">
    <button (click)="getUser(searchKey)">Search</button>
    <ol>
        Data:
        <ul *ngFor="let result of results">
            {{result.login}} {{result.html_url}}
        </ul>
    </ol>
</div>

Answer 1

您的订阅中存在问题：

应该是this.results = results而不是this.results = this.results。

您正在将此结果分配给自己。

此外，在您的模板中，而不是<ul ngFor= "let result of results"></ul>，它应该是：

<ul>
    <li ngFor="let result of results">{{result.login}} {{result.html_url}}</li>
</ul>

Answer 2

1）删除.subscribe并让getUser方法返回一个Observable并将其分配给一个变量，在你的情况下只需调用它结果$（$表示这个var是一个Observable）

getUser(value){
    this.results$ = this.gitHubService.getUser(value);
}

2）在视图方面，更改你的ngFor：

<ul *ngFor="let result of results$ | async">

以下是一些可以帮助您理解的链接： Observable documentation和 Angular2 observables example

Answer 3

我已经解决了这个问题，vinod-bhavnani建议我添加了

this.results =结果，现在看起来 -

getUser(value){
 return this.gitHubService.getUser(value)
  .subscribe(results=>{
    this.results=results;
    console.log(value);
    console.log(results);

  });

和

＆＃13;

＆＃13;

<ul>
    <li *ngFor="let result of results.items">{{result.login}} {{result.html_url}}</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

正如我所见，我的回应是以物品形式出现的。因此，我添加了results.items而不是结果。