Angular 4 Material http服务没有被调用

Question

我正在尝试从在其他服务器上运行的 Angular 调用我的休息服务，并使用 Angular 材料填充表格，我已经完成了如何在 Angular 4 和 Angular 4 材料表中使用 md-table 和服务在下面的过程中尝试填充

组件：

import { MatPaginator } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';
import { Component, OnInit,ViewChild,ChangeDetectorRef } from '@angular/core';
import { WellService } from '../services/well.service';
import { Well } from '../well/well';
import {  Observable  } from 'rxjs/Rx';
import { BehaviorSubject } from  'rxjs/BehaviorSubject';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';



@Component({
  selector: 'app-well',
  templateUrl: './well.component.html',
  styleUrls: ['./well.component.css'],
  providers:[WellService]
})



export class WellComponent implements OnInit {
  title = 'Wells';
  header:string;
  displayedColumns = ['active', 'company', 'country', 'well','wellbore'];
  public wellDatabase : WellDatabase | any;
  public wellDataSource: WellDataSource | any;

  @ViewChild(MatPaginator) paginator : MatPaginator;

  constructor(private wellService:WellService,private changeDetector:ChangeDetectorRef) {

    this.header='assets/images/BHI_header_logo_bd.png'  

   }

  ngOnInit() {
    this.wellDataSource = new WellDataSource(this.wellDatabase,this.paginator);
    this.changeDetector.detectChanges();
    console.log(this.wellDataSource);
  }

}
export class WellDatabase  {

  dataChange: BehaviorSubject<Well[]> = new BehaviorSubject<Well[]>([]);
  get data(): Well[] { return this.dataChange.value }

  constructor(private wellService: WellService) {
    this.getWells();
  }
getWells(){
  this.wellService.getWells().subscribe( response => {
    this.dataChange.next(response);
});
}






}
export class WellDataSource extends DataSource<any> {

  constructor(private _wellDatabase : WellDatabase, private _paginator: MatPaginator){
    super();
  }

  connect(): Observable<Well[]> {

const displayDataChanges = [
      this._wellDatabase.dataChange,
      this._paginator.page
    ];
    return Observable.merge(...displayDataChanges).map(() => {
      const data = this._wellDatabase.data.slice();
      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      return data.splice(startIndex, this._paginator.pageSize);
    })
  }

  disconnect() {}
}  

服务：

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response  } from '@angular/http';
import { Observable,Subject } from 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';  
import { Well } from '../well/well';
import 'rxjs/Rx';
@Injectable()
export class WellService {


  constructor(private  http:Http) { }
public getWells(): Observable < Well[] > {  
    return this.http.get('http://localhost:8080/RESTfulExample/rest/auth/testuser1/pass').map((response: Response) => {  
        return <Well[] > response.json().wellList;  
    }).catch(this.handleError);  
}  
//    
private handleError(errorResponse: Response) {  
    console.log(errorResponse.statusText);  
    return Observable.throw(errorResponse.json().error || "Server error");  
}  
private getHeaders(){
    // I included these headers because otherwise FireFox
    // will request text/html instead of application/json
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    return headers;
  }

}

HTML：

<div style="text-align:center">  
  <div><img width="1100" [src]="header" margin-top:-40px></div>
   <div> 
        <mat-table #table [dataSource]="dataSource">



    <!-- Active -->
    <ng-container matColumnDef="active">
      <mat-header-cell *matHeaderCellDef> Active </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.well.active}} </mat-cell>
    </ng-container>

    <!-- Company -->
    <ng-container matColumnDef="company">
      <mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.company}} </mat-cell>
    </ng-container>

    <!-- Country -->
    <ng-container matColumnDef="country">
      <mat-header-cell *matHeaderCellDef>Country</mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.well.country}} </mat-cell>
    </ng-container>

    <!-- Well -->
    <ng-container matColumnDef="well">
      <mat-header-cell *matHeaderCellDef> Well </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.well}} </mat-cell>
    </ng-container>


        <!-- Wellbore -->
        <ng-container matColumnDef="wellbore">
          <mat-header-cell *matHeaderCellDef> Wellbore </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.well.wellbore}} </mat-cell>
        </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>


  <mat-paginator #paginator
  [length]="wellDataSource.length"
  [pageIndex]="0"
  [pageSize]="25"
  [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>



          </div>           
</div>  

我可以看到我的 HTTP 服务没有被调用，我遵循的过程是否正确，任何人都可以在这方面指导我。

json 响应如下所示： {"wellList":[{"country":"USA","well":"HBASE WELL","wellbore":"HBASE WELLBORE","company":"BAKER HUGHES","active":"-1" },{"country":"USA","well":"CurveEntWell","wellbore":"CurveEntWellBore","company":"BAKER HUGHES","active":"-1"},{"country" :"USA","well":"20Feb17Well", "wellbore":"20Feb17Wellbore2","company":"BAKER HUGHES","active":"-1"}]}

Answer 1

您使事情过于复杂，您不需要WellDatabase，因为我们正在获取“真实”数据。所以你要做的是获取组件中的数据，将其存储在一个 observable 中，然后将该 observable 传递给你的WellDataSource。

请比我在下面更好地命名（和类型）变量；）

public dataSource: WellDataSource | any;
obs: any;

ngOnInit() {
  this.obs = this.wellService.getWells();
  this.dataSource = new WellDataSource(this.obs, this.paginator);
}

然后你的WellDataSource:

constructor(private _obs: any, private _paginator: MatPaginator) {
  super();
}

connect(): Observable<any[]> {
  const displayDataChanges = [
    this._obs,
    this._paginator.page,
  ];

  return this._obs.flatMap(x => {
    return Observable.merge(...displayDataChanges).map(() => {
      const data = x.slice();
      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      return data.splice(startIndex, this._paginator.pageSize);
    });
  })
}

你的html也有错误，应该是

[length]="dataSource._obs.value.length"

而不是

[length]="wellDataSource.length"

DEMO

Answer 2

试试这个示例代码

//Component
getWells(){
    this.wellService.getWells()
          .then(data => {

            if (verifyResponse(data)) {
              // Success case area
              this.dataChange.next(response);
            } else {
              //Negative case area need to handle here
            }
          });
}

//Method to verify response data
verifyResponse(data){
    // verfiy accordingly and return flags
    if(){
        return true;
    }else{
        return false;
    }
}

//Service
getWells(){
        return new Promise(resolve => {
           this.http.get('http://localhost:8080/RESTfulExample/rest/auth/testuser1/pass' )
                    .subscribe(
                        data => {
                            resolve(data.wellList);                                 
                        }, error => {
                            resolve(false);                               
            });

        });
}