material2流程栏实施问题

Question

我想在我的Web应用程序中实现此进程栏，但是在http请求的基础上无法正常工作。 [https://material.angular.io/components/progress-bar/overview][1]

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-process-bar',
  templateUrl: './process-bar.component.html',
  styleUrls: ['./process-bar.component.css']
})
export class ProcessBarComponent{

      color: string = 'accent';
      determinateProgressValue: number = 10;

}

.process-bar-custom-css{
    margin: 0px;
    z-index: 9999;
  }

<mat-progress-bar 
    class="process-bar-custom-css"
    mode="determinate" 
    [value]="determinateProgressValue" 
    [color]="color">
</mat-progress-bar>

Answer 1

  

示例：

   <div ng-show="isLoading">
    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <span class="sr-only">Loading...</span>
    </div>



   .controller('firstCtrl', ['$scope', '$http', 'ngProgressFactory', function ($scope, $http, ngProgressFactory) {


                    $scope.isLoading = null;

                    $http.get('https://feeds.citibikenyc.com/stations/stations.json').
                            success(function (data, status, headers, config) {

                                $scope.isLoading = 'done';


                                $scope.data = data; //first get the full object
                                $scope.mainArray = data.stationBeanList; 

                                $timeout($scope.progressbar.complete(), 100);

                            }).
                            error(function (data, status, headers, config) {
                                // called asynchronously if an error occurs
                                // or server returns response with an error status.
                            });
                }]);