服务未在 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
});
}
我在服务中有以下功能 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
});
}