服务未在 Angular 4.x 中触发 post 请求

Service isn't firing off post request in Angular 4.x

我在服务中有以下功能 uploadCSV,应该 post 到端点以上传 csv - 我可以在控制台日志中看到 csv 文件存在,但是在检查网络时选项卡上没有显示任何 POST 请求 - 知道为什么吗?

import { Injectable } from '@angular/core';
import { ApiService } from "../../../services/api.service";
import { Observable } from "rxjs/Observable";
import { HttpClient } from '@angular/common/http';


@Injectable()
export class BulkuploadService {

constructor(
    private http: HttpClient,
    private apiService: ApiService,
    private userService: UserService
) { }

uploadCSV(csvFile: any): any {
    console.log(csvFile);
    let formData:FormData = new FormData;
    formData.append('file', csvFile, csvFile.name);
    console.log(formData);

    let url = this.apiService.getApiUrl('bulk-upload/upload');
    console.log(url);

    return this.http.post(url, formData);
}

}

// 组件

import { Component, 
OnInit, 
Inject,
Input, 
Output, 
EventEmitter, 
ElementRef } from '@angular/core';

import { DOCUMENT } from '@angular/common';
import * as moment from 'moment';
import { BulkuploadService } from './bulkupload.service';

@Component({
selector: 'app-bulkupload',
templateUrl: './bulkupload.component.html',
styleUrls: ['./bulkupload.component.scss'],
providers: [
    BulkuploadService
]
})
export class BulkuploadComponent implements OnInit {

@Output() closeEvent = new EventEmitter<boolean>();
private postObjects = [];

constructor(@Inject(DOCUMENT) private document: any,
    private ref: ElementRef,
    public bulkService: BulkuploadService    
) { }

uploadCSV(event: any): void {
    this.bulkService.uploadCSV(event.target.files[0]);
}

}

您需要像 this 示例中那样订阅 http post 调用:

showConfig() {
  this.configService.getConfig()
    .subscribe((data: Config) => this.config = {
        heroesUrl: data['heroesUrl'],
        textfile:  data['textfile']
    });
}

Observable 是惰性的,您需要订阅它才能执行。

 uploadCSV(event: any): void {
    this.bulkService.uploadCSV(event.target.files[0]).subscribe(data => {
      //handle next steps after execution
    },err=>{
      //handle error
    },()=>{
      //completed
    });
  }