firefox上http请求的Angular 2问题
我对firefox和所有ios浏览器(firefox、safari)上的Angular 2应用程序有一个非常奇怪的问题 当用户在我的应用程序中输入firefox上http请求的Angular 2问题,angular,typescript,Angular,Typescript,我对firefox和所有ios浏览器(firefox、safari)上的Angular 2应用程序有一个非常奇怪的问题 当用户在我的应用程序中输入/reports路由时,我通过ngOnInit方法调用我的RESTAPI来获取json数据 这是处理数据加载的ngOnInit方法的一部分: ngOnInit() { //this.service is my service to get reports this.service.getReports(this.categoryId).subs
/reports
路由时,我通过ngOnInit
方法调用我的RESTAPI来获取json数据
这是处理数据加载的ngOnInit方法的一部分:
ngOnInit() {
//this.service is my service to get reports
this.service.getReports(this.categoryId).subscribe(res => {
this.testReports = res;
}
}
收到响应后,我将在html文件中呈现我的报告:
<div class="cat-item-holder" *ngFor="let singleCategory of testReports; let i=index">
{{singleCategory.name}}
</div>
--
我的包json文件
{
"name": "front",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.2.3",
"@angular/compiler": "2.2.3",
"@angular/core": "2.2.3",
"@angular/forms": "2.2.3",
"@angular/http": "2.2.3",
"@angular/material": "^2.0.0-alpha.11-3",
"@angular/platform-browser": "2.2.3",
"@angular/platform-browser-dynamic": "2.2.3",
"@angular/router": "3.2.3",
"@angular/upgrade": "~2.2.1",
"@vaadin/angular2-polymer": "^1.0.0-rc1",
"angular2-fontawesome": "~0.7.0",
"angular2-in-memory-web-api": "0.0.21",
"angular2-jwt": "^0.1.26",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ie-shim": "^0.1.0",
"ng-disable-scroll": "^0.1.1",
"ng2-bootstrap": "^1.1.16",
"ng2-dropdown": "0.0.15",
"ng2-filter-pipe": "^0.1.4",
"ng2-page-scroll": "3.2.3",
"ng2-parallax": "^0.3.0",
"ng2-parallax-scroll": "^0.4.0",
"ng2-sticky-kit": "^1.1.0",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@angular/compiler-cli": "2.2.3",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.21",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}
}
和我的报告服务实施:
import {Injectable } from '@angular/core';
import {Http, Headers, Response , URLSearchParams} from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { MainService } from './main.service';
@Injectable()
export class ReportsService {
constructor(private http:Http , private mainService:MainService) {
this.http = http;
}
getReports(categoryId) : Observable<Response> {
let params: URLSearchParams = new URLSearchParams();
params.set('cat', categoryId);
params.set('user', this.mainService.getMainUserMail());
return this.http.get(this.mainService.getServiceUrl()+'/reports/' , {headers: this.mainService.getHeaders() , search: params}).map(res => res.json());
}
}
在reports.ts
组件中:
constructor(private ref: ChangeDetectorRef) {
setInterval(() => {
this.ref.detectChanges();
}, 5000);
}
现在,在firefox中加载页面5秒后,我的浏览器几乎没有挂断,结果成功呈现,但有人知道如何防止挂断吗 将其作为“答案”发布,但它更多的是基于您自己的解决方案。我仍然认为问题在于聚合物与angular的变化检测相结合
@Component({...})
export class ReportsComponent {
constructor(private changeDetector: ChangeDetectorRef){}
ngOnInit() {
this.service.getReports(this.categoryId).subscribe(res => {
this.testReports = res;
setTimeout(() => {
this.changeDetector.detectChanges();
});
}
}
}
不完全确定是否需要设置超时,但这要由您来确定。这将触发此组件及其子组件上的更改检测。基本上,你用鼠标点击和移动来触发angular的变化检测 将其作为“答案”发布,但它更多的是基于您自己的解决方案。我仍然认为问题在于聚合物与angular的变化检测相结合
@Component({...})
export class ReportsComponent {
constructor(private changeDetector: ChangeDetectorRef){}
ngOnInit() {
this.service.getReports(this.categoryId).subscribe(res => {
this.testReports = res;
setTimeout(() => {
this.changeDetector.detectChanges();
});
}
}
}
不完全确定是否需要设置超时,但这要由您来确定。这将触发此组件及其子组件上的更改检测。基本上,你用鼠标点击和移动来触发angular的变化检测 您是否在组件或其父组件中使用了不同类型的
ChangeDetectionStrategy
?您好@PierreDuc,我的应用程序中没有使用任何类型的ChangeDetectionStrategy,我应该使用一个吗?@PierreDuc我已经尝试在我的一个组件中使用ChangeDetectionStrategy和ChangeDetectionStrategy。onPush应用程序也会挂断在Chrome中。如果您没有使用特殊的ChangeDetection
,那么一切都应该按原样工作。您使用的是什么版本的angular?你的浏览器是最新的吗?你能给我看看你的getReports
实现吗?@PierreDuc我使用的是polymer的angular-2 cli版本,在我的帖子中我粘贴了angular cli、json、tsconfig.json和我的服务。另外,我的浏览器是最新的。您是在您的组件中使用不同类型的ChangeDetectionStrategy
,还是在其父组件中使用不同类型的ChangeDetectionStrategy
?您好@PierreDuc,我的应用程序中没有使用任何类型的ChangeDetectionStrategy,我应该使用一个吗?@PierreDuc我已经尝试在我的一个组件中使用ChangeDetectionStrategy和ChangeDetectionStrategy。onPush应用程序也会挂断在Chrome中。如果您没有使用特殊的ChangeDetection
,那么一切都应该按原样工作。您使用的是什么版本的angular?你的浏览器是最新的吗?你能给我看看你的getReports
实现吗?@PierreDuc我使用的是polymer的angular-2 cli版本,在我的帖子中我粘贴了angular cli、json、tsconfig.json和我的服务。此外,我的浏览器是最新的
@Component({...})
export class ReportsComponent {
constructor(private changeDetector: ChangeDetectorRef){}
ngOnInit() {
this.service.getReports(this.categoryId).subscribe(res => {
this.testReports = res;
setTimeout(() => {
this.changeDetector.detectChanges();
});
}
}
}