material2 流程栏实现问题答案

【问题标题】：material2 process bar implementation issuematerial2 流程栏实现问题
【发布时间】：2017-12-19 11:16:19
【问题描述】：

我想在我的 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>

【问题讨论】：

究竟是什么不起作用？请更具体地说明您想要实现的目标。

标签： angular-material2

【解决方案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.
                            });
                }]);

【讨论】：