0

我可以通过 http get 调用从 Web 服务获取数据，但表格只显示骨架而不是数据。它与 Web 服务检索到的记录完全相同，但没有显示数据。如果我在角度服务中硬编码值，那么我可以在屏幕上看到数据。

以下是代码片段：服务文件

async getData():Promise<any>{


  return this.http.get("http://localhost:8080/SpringRestExample/get/filedata").toPromise()
  .then(resp => resp.json());

}

html代码

import {Component, ViewChild,Input,ViewEncapsulation, OnInit} from '@angular/core';
import {MatTableDataSource, MatSort,MatPaginator} from '@angular/material';
import { FileManagerServiceService } from '../../../@core/data/file-manager-service.service';
import {DataSource } from '@angular/cdk/table';
import {NgbModal, NgbActiveModal,ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import {ModalComponents} from '../modal/modal.component'; 
import { ModalComponentsAlert} from '../alertmodal/modal.component'
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {file} from './fIle';
@Component({
  selector: 'filemanager',
  templateUrl: './filemanager.component.html',
  styleUrls: ['./filemanager.component.scss'],
  encapsulation : ViewEncapsulation.None
})
export class FilemanagerComponent implements OnInit {
 async ngOnInit(){
   this.data=  await this.service.getData();
   console.log(this.data);
   this.dataSource = new MatTableDataSource(this.data);
   this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    console.log(this.dataSource);
    
   // this.dataSource = new MatTableDataSource(this.data);
   // console.log(this.dataSource);
  }
  displayedColumns = ['filename','schedulekey','destination','state','Action'];
  //displayedColumns = ['Alert Id', 'Severity', 'Subject',];
  closeResult: string;
  @Input() modal:ModalComponents;
  data:any[];
  dataSource = new MatTableDataSource(this.data);
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator
  constructor(private service: FileManagerServiceService,private modalService:NgbModal) {
    this.dataSource = new MatTableDataSource(this.data);
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
       
 }
  /**
   * Set the sort after the view init since this component will
   * be able to query its view for the initialized sort.
   */
//    getPosts() {
//       this.service.getData()
//         .subscribe(resultArray => {
//                 this.data = resultArray;
//                 console.log(this.data);
//             },
//             error => console.log("Error :: " + error)
//         );
// }

  ngAfterViewInit() {
    this.dataSource = new MatTableDataSource(this.data);
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    
  }
 private showDetails(description:string){
  const activeModal = this.modalService.open(ModalComponentsAlert); 
  activeModal.componentInstance.modalHeader = 'Alert Details';
  activeModal.componentInstance.data=description;
  if(this.closeResult=="assets/images/stop.png"){
  this.closeResult="assets/images/start.png";
  }
    
  }
  private acknowledgeAlert(id:number){
  
  const activeModal = this.modalService.open(ModalComponents);
  activeModal.componentInstance.modalHeader = 'Acknowledgement Justification';
  activeModal.result.then((result) => {console.log(this.closeResult);this.deleteItem(id,result);}, () => { console.log('Backdrop click')})
  this.dataSource = new MatTableDataSource(this.data);
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
}
 deleteItem(id:number,result:string){
  alert(id);
   console.log(result); 
   this.dataSource.data.splice(id - 1, 1);
   this.dataSource = new MatTableDataSource(this.data);
   this.dataSource.paginator = this.paginator;
   this.dataSource.sort = this.sort;
}
private getDismissReason(reason: any): string {
  if (reason === ModalDismissReasons.ESC) {
    return 'by pressing ESC';
  } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
    return 'by clicking on a backdrop';
  } else {
    alert();
      return  'd';
      
  }
}
isFilestate(state:string){
  if(state=="DISTRIBUTED" || state=="COLLECTION_OPERATION_FAILED"){
    return true;
  } 
}
isStopped(state:string){
  if(state=="BEING_PROCESSED" || state=="PROCESSED_FOR_TARGET"){
    return true;
 } 
}
isFailed(state:string){
  if(state=="PROCESSING_FAILED_FOR_TARGET"){
    return true;
 } 
}

}

export class FileDataSource extends DataSource<any> {

  constructor(private service:FileManagerServiceService) {
    super();
  }

  connect(): Observable<any> {
    return Observable.of(this.service.getData());
  }

  disconnect() {
    // No-op
  }

}
<div class="col-md-12">
<div class="table-header"> File Manager </div>
<mat-table  #table [dataSource]="dataSource" class="consumption-table" matSort>

  <!-- Position Column -->
  <ng-container matColumnDef="filename">
      <mat-header-cell class="font-weight-table-header"  *matHeaderCellDef mat-sort-header>File Name </mat-header-cell>
    <mat-cell class="font-weight-table" *matCellDef="let element"> {{element.filename}} </mat-cell>
  </ng-container>

  <!-- Severity Column -->
  <ng-container matColumnDef="schedulekey">
    <mat-header-cell class="font-weight-table-header" style="padding-left:20px" *matHeaderCellDef mat-sort-header> Schedule Key </mat-header-cell>
    <mat-cell class="font-weight-table"style="padding-left:20px"  *matCellDef="let element"> {{element.schedulekey}} </mat-cell>
  </ng-container>

  <!-- Description Column -->
  <ng-container matColumnDef="destination">
    <mat-header-cell class="font-weight-table-header"  *matHeaderCellDef   > Destination </mat-header-cell>
    <mat-cell class="font-weight-table"  *matCellDef="let element">  {{element.destination}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="state">
      <mat-header-cell class="font-weight-table-header"  *matHeaderCellDef   > State </mat-header-cell>
      <mat-cell class="font-weight-table my-mat-cell"  *matCellDef="let element">  {{element.state}}</mat-cell>
      </ng-container>
  
    <!-- Action Column -->
    <ng-container matColumnDef="Action" style="margin-left: 75px;">
      <mat-header-cell class="font-weight-table-header"  *matHeaderCellDef>Actions</mat-header-cell>
      
      <mat-cell  *matCellDef="let element; let i = index ">
        <div *ngIf="isFilestate(element.state)">
       <span class="button" title="Retry" (click)="showDetails(element.state)"><img src="assets/images/retry.png" width="20" height="15"></span>
       <span class="button" title="Purge" (click)="acknowledgeAlert(i+1)"><img src="assets/images/purge.png" width="20" height="15"></span>
        </div>
        <div *ngIf="isStopped(element.state)">
          <span class="button"title="Stop" (click)="showDetails(element.state)"><img src="assets/images/stop.png" width="20" height="15"></span>
          </div>
          <div *ngIf="isFailed(element.state)">
          <span class="button" title="Stop" (click)="showDetails(element.state)"><img src="assets/images/stop.png" width="20" height="15"></span>
          </div>
      </mat-cell>
    
    </ng-container>

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

  </mat-row>
 </mat-table>
</div>
 <mat-paginator style="padding-right:50px" #paginator
 [pageSize]="4"

 >
</mat-paginator>

4

0 回答 0