本人前端萌新,學習過一點點Angular,然后自己寫了一個簡單例子,就是顯示一下瀏覽器信息,相關代碼如下,可以正常運行,界面會先顯示瀏覽器的信息,然后過幾秒顯示出IP地址。
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import platform from 'platform';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class ClientInfoService {
private static ipUrl = 'http://httpbin.org/ip';
constructor(private httpClient: HttpClient) {
}
getClientInfo(): Promise<ClientInfo[]> {
return new Promise((resolve, reject) => {
const clientInfo: ClientInfo[] = [];
clientInfo.push({key: '操作系統', value: `${platform.os}`});
clientInfo.push({key: '瀏覽器', value: `${platform.name} ${platform.version}`});
clientInfo.push({key: '用戶代理', value: platform.ua});
this.httpClient.get(ClientInfoService.ipUrl)
.subscribe(data => {
clientInfo.push({key: 'IP地址', value: data['origin']});
resolve(clientInfo);
}, err => {
reject(err);
});
});
}
}
export interface ClientInfo {
key: string;
value: string;
}
然后Angular更新到6了,我研究一段時間以后,嘗試升級了一下,好不容易代碼能運行了,但是這下IP地址無法更新了。代碼現在如下,程序其他部分也作了相應修改,可以編譯。但是現在程序可以顯示瀏覽器的信息,IP地址永遠為空。我想了想,感覺問題應該是出在rxjs這里,因為我對這些概念不太理解,代碼肯定寫錯了,所以希望高手們給我解解惑。感謝各位!
@Injectable()
export class ClientInfoService {
private static ipUrl = 'http://httpbin.org/ip';
constructor(private httpClient: HttpClient) {
}
getClientInfo(): Observable<ClientInfo[]> {
const clientInfo: ClientInfo[] = [];
clientInfo.push({key: '操作系統', value: `${platform.os}`});
clientInfo.push({key: '瀏覽器', value: `${platform.name} ${platform.version}`});
clientInfo.push({key: '用戶代理', value: platform.ua});
const data = this.httpClient.get(ClientInfoService.ipUrl)
.pipe(
catchError(this.handleError('獲取IP地址', '網絡錯誤'))
);
clientInfo.push({key: 'IP地址', value: data['origin']});
return of(clientInfo);
}
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error);
return of(result as T);
};
}
}
export interface ClientInfo {
key: string;
value: string;
}
感謝各位的解答,現在終于可以顯示IP地址了,但是還有一個問題就是原來是立即顯示一些東西,然后獲取到IP地址之后才更新?,F在我這個代碼變成了需要等到IP地址拿到之后才整個顯示數據。請問這下應該如何處理?
getClientInfo(): Observable<ClientInfo[]> {
const clientInfo: ClientInfo[] = [];
clientInfo.push({key: '操作系統', value: `${platform.os}`});
clientInfo.push({key: '瀏覽器', value: `${platform.name} ${platform.version}`});
clientInfo.push({key: '用戶代理', value: platform.ua});
return this.httpClient.get(ClientInfoService.ipUrl)
.pipe(
map(data => data['origin']),
catchError(this.handleError('獲取IP地址', '網絡錯誤')),
map(e => {
clientInfo.push({key: 'IP地址', value: e});
return clientInfo;
})
);
}
感覺我描述的不夠清晰,順便補上視圖顯示的代碼。
@Component({
template: `
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="key">
<mat-header-cell *matHeaderCellDef>項目</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.key}}</mat-cell>
</ng-container>
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef>值</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.value}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
`,
})
export class ClientInfoComponent implements OnInit {
dataSource: ClientInfoDataSource;
displayedColumns = ['key', 'value'];
constructor(private clientInfoService: ClientInfoService) {
}
ngOnInit(): void {
this.dataSource = new ClientInfoDataSource(this.clientInfoService);
}
}
class ClientInfoDataSource implements DataSource<any> {
constructor(private clientInfoService: ClientInfoService) {
}
connect(): Observable<ClientInfo[]> {
return this.clientInfoService.getClientInfo();
}
disconnect(): void {
}
}
rxjs 需要訂閱,而上面這段代碼中 this.httpClient.get
并未subscribe,也就不會觸發(fā),或者即使訂閱了也因為是異步執(zhí)行而沒有效果,最終直接返回了值為clientInfo
的observer,這個值始終都會是[]
。
正確做法getClientInfo()
應該返回代碼中定義的data
這個Observable
,比如說:
getClientInfo(): Observable<ClientInfo[]> {
...
const data = this.httpClient.get(ClientInfoService.ipUrl)
.pipe(
map((rs) => [{key: 'IP地址', value: rs['origin']}]),
catchError(this.handleError('獲取IP地址', '網絡錯誤'))
);
return data;
}
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數據專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年,作為華東區(qū)著名互聯網學院和江蘇省首批服務外包人才培訓基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團創(chuàng)建于1999年,經過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術與教育服務機構,發(fā)展為教育服務業(yè)的綜合性企業(yè)集團,成為集合面授教學培訓、網
達內教育集團成立于2002年,是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構,是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯想擔任系統開發(fā)工程師,曾在博彥科技股份有限公司擔任項目經理從事移動互聯網管理及研發(fā)工作,曾創(chuàng)辦藍懿科技有限責任公司從事總經理職務負責iOS教學及管理工作。
浪潮集團項目經理。精通Java與.NET 技術, 熟練的跨平臺面向對象開發(fā)經驗,技術功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網頁制作和網頁游戲開發(fā)。
具有10 年的Java 企業(yè)應用開發(fā)經驗。曾經歷任德國Software AG 技術顧問,美國Dachieve 系統架構師,美國AngelEngineers Inc. 系統架構師。