Angular 6：组件数据绑定问题

Question

我致电服务以进行http呼叫，当我尝试访问该组件变量以查看其显示为空白时，现在将响应分配给该组件变量。

意味着在订阅中成功分配了组件变量，但无法在html视图中访问。

我认为在将值分配给组件数据之前已加载视图。

组件

import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
import { UserService } from '../../../../../core/services/users/user.service';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'm-user-list',
    templateUrl: './user-list.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserListComponent implements OnInit {
    list;
    roles = {};
    current_page: any
    totalRecords: any
    public showContent: boolean = false;

    constructor(private userService: UserService, private http: HttpClient) {

    }

    ngOnInit() {
        this.getRecords();        
    }   

    getRecords(){
        this.getResultedPage(1);
    }

    getResultedPage(page){
        return this.userService.getrecords()
            .subscribe(response => {
                this.list = response.data;                              
            });
    }
}

服务

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { HttpClient, HttpParams , HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { map, catchError, tap, switchMap } from 'rxjs/operators';

const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
};

import { UtilsService } from '../../services/utils.service';
import { AppConfig } from '../../../config/app'


@Injectable({
    providedIn: 'root'
})
export class UserService{
    public appConfig: AppConfig;
    public API_URL;

    constructor(private http: HttpClient, private util: UtilsService) {
        this.appConfig = new AppConfig();
        this.API_URL = this.appConfig.config.api_url;
    }

    private extractData(res: Response) {
        let body = res;
        return body || { };
    }

    private handleError(error: HttpErrorResponse) {
        if (error.error instanceof ErrorEvent) {
            // A client-side or network error occurred. Handle it accordingly.
            console.error('An error occurred:', error.error.message);
        } else {
            // The backend returned an unsuccessful response code.
            // The response body may contain clues as to what went wrong,
            console.error(
                `Backend returned code ${error.status}, ` +
                `body was: ${error.error}`);
        }
        // return an observable with a user-facing error message
        return throwError('Something bad happened; please try again later.');
    };

    getrecords(): Observable<any> {
        return this.http.get('/api/users', httpOptions).pipe(
            map(this.extractData),
            catchError(this.handleError));
    }


}