在组件中更改其变量的值后，如何重新运行ngFor循环？

Question

我正在尝试制作Github Search应用，并使用ngFor循环显示搜索数据。输入值时，UARR的值会更改，但DOM不会更改。 最初，当我输入一个字符时，它也会立即显示结果，但是随后的按下按键对HTML DOM无效。我很困惑，到处都在寻找答案，但这没有用。 每当uarr的值更改时，如何重新运行ngFor循环？

<div class="row">
  <div class="col-md-12">
    <form>
      <div class="form-group">
        <input type="text" class="form-control" [(ngModel)]="username" name="username" (keyup)="searchUser()" >
      </div>
    </form>
  </div>
</div>

<div *ngIf="uarr" >
  <ul *ngFor="let data of uarr" class="list-unstyled" >
        <li>
              <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                  <a href="#" >
                    <img class="github-avatar" src="{{data.avatar_url}}" >
                  </a>
                  <div class="caption">
                    <h3 class="text-center">{{ data.login }}</h3>
                  </div>

                </div>
              </div>
        </li>
  </ul>
</div>

组件代码：

    import { Component  } from '@angular/core';
import { GithubService } from '../services/git.services';
import { map } from 'rxjs/operators';


//import { user } from '../models/gitusers';

@Component({
    selector: 'searchform',
    templateUrl: 'search.component.html',
    providers:[GithubService]
  })


export class SearchformComponent  {
    users :  any;
    uarr: any[] = [];
    username: string;

  //  @Output() userUpdated: EventEmitter<user> = new EventEmitter<user>();

    constructor(private _githubService: GithubService) {

      }

    searchUser() {
      this._githubService.updateUser(this.username);

      console.log(this.username);
        this._githubService.getUser().subscribe(user => {
        this.users = user.items;
        for (var i in this.users) {
          this.uarr.push(this.users[i]); }
        });
        console.log(this.uarr);

    }
/*
      ngOnInit() {

           if (this.user) {
               this.user.user = false;
               this.getUserInformation();
           }

       }

    getUserInformation() {
        if (this.user.userName && this.user.userName.length > 0) {

            this._githubService.getUser().subscribe(user => {
                this.user.user = user;
              //  this.userUpdated.emit(this.user);
            },
                (err) => {
                    console.log('err:' + err);
                    this.user.user = false;
                },
                () => console.log('Done')
            );



            this._githubService.getRepos().subscribe(repos => {
                // console.log(repos);
                this.user.repos = repos;
              //  this.userUpdated.emit(this.user);
            },
                (err) => {
                    console.log('err:' + err);
                    this.user.user = false;
                },
                () => console.log('Done')
            );

        }
    }*/
}

服务代码：

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';

import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

import { environment } from '../../environments/environment';
const API_URL = environment.apiUrl;




@Injectable()
export class GithubService {
    private userName = "matt";
    private client_id = '3198278eb6fb7788fa1e';
    private client_secret = 'd6b3cf6265f7997f110ec1450246e7157d055a8f';

    constructor(private _http: Http) {
        console.log('Github Service Ready.');
    }

    getUser() {
        if (this.userName) {
            return this._http.get(API_URL + this.userName + '&client_id=' + this.client_id + '&client_secret=' + this.client_secret)
                .pipe(
                  map(res => res.json()),
                  catchError(this.handleError));
        }
    }

    getRepos() {
        if (this.userName) {
            return this._http.get(API_URL + this.userName + '/repos')
                 .pipe(
                  map(res => res.json()),
                  catchError(this.handleError));
        }

    }
    updateUser(username: string) {
        this.userName = username;
        console.log(this.userName);
    }

    private handleError(error: any) {

        if (error.status === 401) {
            return Observable.throw(error.status);
        } else {
            return Observable.throw(error.status || 'Server error');
        }
    }
}

服务中的某些功能是多余的，可供将来使用。 我应该删除异常处理代码以减小应用程序的大小。 谢谢。