有许多adhoc库支持angular2的上传/下载进度,我不知道如何使用native angular2 http api在上传/下载时显示进度.
我想使用原生http api的原因是因为我想利用它
有一篇关于如何使用angular的http api进行上传/下载的好文章
但该文章提到,没有本土方式来支持进步.
有没有人尝试使用http api来显示进度？
如果没有,你知道角度回购中的问题吗？
我是Angular的新手(和Javascript一样).我写了一个Angular服务,它返回一个用户数组.从HTTP调用中检索数据,该调用以JSON格式返回数据.记录从HTTP调用返回的JSON数据时,我可以看到此调用成功并返回正确的数据.我有一个调用服务来获取用户的组件和一个显示用户的HTML页面.我无法从服务获取数据到组件.我怀疑我正在使用Observable.也许我正在使用订阅错误.如果我在ngInit函数中注释掉getUsers调用并取消注释getUsersMock调用,那么一切正常,我看到HTML页面中列表框中显示的数据.我想将JSON数据转换为服务中的数组或用户列表,而不是从服务返回JSON并让组件转换它.
从HTTP调用返回的数据获取用户:
[
{
"firstName": "Jane",
"lastName": "Doe"
},
{
"firstName": "John",
"lastName": "Doe"
}
]
user.ts
export class User {
firstName: string;
lastName: string;
}
用户service.ts
...
@Injectable
export class UserService {
private USERS: User[] = [
{
firstName: 'Jane',
lastName: 'Doe'
},
{
firstName: 'John',
lastName: 'Doe'
}
];
constructor (private http: Http) {}
getUsersMock(): User[] {
return this.USERS;
}
getUsers(): Observable<User[]> {
return Observable.create(observer => {
this.http.get('http://users.org').map(response => response.json();
})
}
...
user.component.ts
...
export class UserComponent …对于Web应用程序,我需要使用ajax请求获取我的图像,因为我们的API上有签名+身份验证,因此我们无法使用简单的方法获取图像 <img src="myapi/example/145"/>
由于我们使用的是angular2,我们显然会查找blob或类似的东西,但正如static_response.d.ts文件中所述:
/**
* Not yet implemented
*/
blob(): any;
好吧,我现在不能这样做,我必须等待你的功能实现.
但问题是我迫不及待所以我需要一个修补程序或一点点黑客才能从响应中获取图像数据,我将能够删除我的hack并将blob()方法调用设置为良好的时候实现它.
我试过这个:
export class AppComponent {
constructor(private api:ApiService, private logger:Logger){}
title = 'Tests api';
src='http://placekitten.com/500/200'; //this is src attribute of my test image
onClick(){ //Called when I click on "test" button
this.api.test().then(res => {
console.log(res._body);
var blob = new Blob([new Uint8Array(res._body)],{
type: res.headers.get("Content-Type")
});
var urlCreator = window.URL;
this.src = urlCreator.createObjectURL(blob);
});
}
}
与ApiService.test()方法:
test():Promise<any> {
return this.http.get(this._baseUrl + "myapi/example/145", …我正在开发一个前端,它使用服务器提供的JSON服务.
我很高兴使用Angular2的HTTP,我可以通过.catch()运算符捕获错误.
如果我发现与特定服务相关的问题(例如,服务未由服务器定义),则catch()运营商会收到Response状态404,我可以轻松管理该情况.
另一方面,如果服务器完全关闭,则catch()操作员会收到带有状态代码的响应,200并且没有与问题原因相关的特定标志或文本(即整个服务器已关闭).在控制台上,我看到angular(http.dev.js)写了一条消息,net::ERR_CONNECTION_REFUSED但我不知道如何在我的代码中做一些类似的事情(即理解正在发生的事情并做出适当的反应).
任何帮助,将不胜感激.
我是angular2和打字稿的新手,已经花了半天的时间来弄清楚ng2表格.我已完成所有路线并构建了所有必要的表格,目前正在尝试了解如何使用打字稿在angular2中发布
这是我的错误:
[default]中的错误simpleapp/src/app/clients/add-client/add-client.component.ts:52:16属性'http'在'AddClientComponent'类型中不存在.
而且我找不到这个问题来自哪里.我已经angular/http在我的组件中导入了,我提供了标题和响应作为官方教程说但仍然可以看到这个问题.我错过了什么,我的问题在哪里？提前致谢
这是我的组成部分:
import 'rxjs/add/operator/map';
import {Component} from '@angular/core';
import {Http, Response, RequestOptions, Headers} from '@angular/http';
import {Employee} from "./model/add-client.model";
@Component({
selector: 'app-add-client',
templateUrl: 'add-client.component.html',
styleUrls: ['add-client.component.css']
})
export class AddClientComponent {
departments: Array<any>;
firstName: '';
lastName: '';
id: null;
salary: null;
phone: null;
departmentId: null;
constructor(http: Http) {
http.get('api/departments')
.map((res: Response) => res.json())
.subscribe((departments: Array<any>) => this.departments = departments);
}
model = new Employee(
this.id,
this.firstName,
this.lastName,
this.salary,
this.departmentId,
this.phone
);
submitted = …我正在为我的Angular2应用程序使用angular-cli.每当我尝试在我的组件/服务中加载angular2/http时,cli终端中没有显示错误,但是在我的浏览器控制台中它显示了这个 -
获取http:// localhost:4200/angular2/http 404(未找到)
未处理的Promise拒绝:错误:XHR错误(404 Not Found) 在XMLHttpRequest.desc.set.wrapFn [as_onreadystatechange]上加载http:// localhost:4200/angular2/http(http:// localhost:4200/vendor/zone. js/dist/zone.js:769:30)在Zone.runTask的ZoneDelegate.invokeTask(http:// localhost:4200/vendor/zone.js/dist/zone.js:356:38)(http:// localhost:4200/vendor/zone.js/dist/zone.js:256:48)在XMLHttpRequest.ZoneTask.invoke(http:// localhost:4200/vendor/zone.js/dist/zone.js:423:34))从http:// localhost:4200/app/js-tree.component.js加载http:// localhost:4200/angular2/http为"angular2/http"时 出错 ; 区域:; 任务:Promise.then; 值:错误:错误:XHR错误(404 Not Found) 在XMLHttpRequest.desc.set.wrapFn [as_onreadystatechange](http:// localhost:4200/vendor/zone)上加载 http:// localhost:4200/angular2/http . js/dist/zone.js:769:30)在Zone.runTask的ZoneDelegate.invokeTask(http:// localhost:4200/vendor/zone.js/dist/zone.js:356:38)(http:// localhost:4200/vendor/zone.js/dist/zone.js:256:48)在XMLHttpRequest.ZoneTask.invoke(http:// localhost:4200/vendor/zone.js/dist/zone.js:423:34))从http:// localhost:4200/app/js-tree.component.js加载http:// localhost:4200/angular2/http为"angular2/http"时 出错
我的angular-cli版本是0.0.39
节点:4.2.2
这是我的system-config.ts
const map: any = {
};
/** User packages configuration. */ …我试图在角度2中内置Http服务的包装器,以便有可能添加自定义行为(标题,参数等)
所以我创建了一个通常的类(不是服务)并从Http继承它. 类定义
import {
Http,
ConnectionBackend,
RequestOptions,
RequestOptionsArgs,
Headers
} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import {tamamApiUrl} from '../constants';
import {CustomQueryEncoder} from './CustomQueryEncoder';
import 'rxjs/Rx';
export class BaseHttp extends Http {
protected applicationDataService;
protected baseUrl: string = tamamApiUrl;
protected encoder: CustomQueryEncoder;
constructor(backend:ConnectionBackend,
defaultOptions: RequestOptions, applicationDataService: any) {
super(backend, defaultOptions);
this.applicationDataService = applicationDataService;
}
get(url: string, options?: RequestOptionsArgs): Observable<any> {
this.addDefaultOptions(options);
return super.get(url, options);
}
post(url: string, body: any, options?: RequestOptionsArgs): Observable<any> {
this.addDefaultOptions(options);
this.addDefaultPostOptions(options);
return super.post(url, …您好我已经创建了一个angular2服务,其任务是调用webapi,它返回json对象结构中的数据,如下所示:
//Result of the webapi service call.
{
"Total":11,
"Data":[{"Id":1,"Name":"A","StartDate":"2016-01-01T00:00:00"},
{"Id":2,"Name":"B","StartDate":"2016-02-01T00:00:00"}]
}
这是我的angular2服务.getMileStones方法工作得很好,我能够将响应转发回MileStone [].但是为了获取分页数据,我创建了一个函数getPagedMileStones(int,int),它调用webapi方法并返回结果如上所述结构.我想将返回的响应从webapi强制转换为IPagedResponse.但我无法使其正常工作.我有一个接口IPagedResponse,我希望此函数将此信息返回给组件调用,以便我可以提供分页功能.
import { MileStoneModel} from './milestoneModel'
import { Http, Response, Headers, RequestOptions } from '@angular/http'
import { Injectable } from '@angular/core'
import { Observable } from 'rxjs/Observable';
import {PaginatePipe, PaginationService, PaginationControlsCmp, IPaginationInstance} from 'ng2-pagination';
import 'rxjs/Rx';
export interface IPagedResponse<T> {
total: number;
data: T[];
}
export interface DataModel {
id: number;
data: string;
}
@Injectable()
export class MileStoneService //implements IPagedResponse<MileStoneModel>
{
data: MileStoneModel[];
//private _page: number = …嗨,我正在尝试使用HTTP模块进行获取请求Angular2.
所有内容都在Typescript(1.5)中编译良好,但Chrome在控制台中显示以下错误:
EXCEPTION: Error during instantiation of EntryList!. ORIGINAL
EXCEPTION: TypeError: Cannot read property 'merge' of undefined
ORIGINAL STACKTRACE: TypeError: Cannot read property 'merge' of undefined
at mergeOptions (angular2.dev.js:27991)
at execute.Http.get (angular2.dev.js:28052)
at EntryService.getEntries (services.js:17)
at new EntryList (entry-list.js:20)
/// <reference path="../typings/angular2/angular2.d.ts" />
import { Http, Observable } from "angular2/angular2"
export class EntryService {
private _entries: Array<string>;
private _http : Http;
constructor() {
this._entries = ["test1", "test2", "test3"];
this._http = new …我已经开始学习,Angular2但我想使用http.post()我的Web API 提交表单,但我不能.
angular2-http ×10
angular ×9
javascript ×3
typescript ×3
rxjs ×2
angular-cli ×1
arrays ×1
forms ×1
http ×1
inheritance ×1
interceptor ×1
json ×1