Typescript 加载ng2表数据表单API
我正在学习Angular 2，我想用PHP中的API数据填充ng2表，我有一个返回数据的服务，但我不知道如何用服务的订阅数据填充数据变量。我正在调用服务方法getLanguages（） 我的服务代码是：Typescript 加载ng2表数据表单API,typescript,angular,Typescript,Angular,我正在学习Angular 2，我想用PHP中的API数据填充ng2表，我有一个返回数据的服务，但我不知道如何用服务的订阅数据填充数据变量。我正在调用服务方法getLanguages（） 我的服务代码是： import { Injectable,bind} from '@angular/core'; import { Http,Response} from '@angular/http'; import 'rxjs/add/operator/toPromise'; import {Langu
import { Injectable,bind} from '@angular/core';
import { Http,Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Language} from './language';
import { Observable } from 'rxjs/Observable';
import {APP_BASE_HREF} from '@angular/common';
@Injectable()
export class LanguageService {
private languagesUrl = '../languages/get_all_languages'; // URL to webapi
constructor(private http: Http) { }
getLanguages(): Observable<Language[]> {
return this.http.get(this.languagesUrl)
.map((responseData) => {
return responseData.json();
})
.catch(this.handleError);
}
getAllLanguages(){
return this.http.get(this.languagesUrl).map(res => res.json());
}
private handleError (error: any) {
let errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
return Observable.throw(errMsg);
}
}
import { Component,OnInit} from '@angular/core';
import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf} from '@angular/common'
import { Language } from './language';
import { LanguageService } from './language.service';
import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table'
import { Observable} from 'rxjs/Observable';
import {TableData} from './table-data';
@Component({
selector: 'languages_list',
templateUrl: '../app/core/Languages/language-list.component.html',
styleUrls: ['../app/core/Languages/language.component.css'],
directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES, NgClass, NgIf, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class LanguageComponent implements OnInit {
languages: Language[];
errorMessage: string;
mode = 'Observable';
public rows:Array<any> = [];
public columns:Array<any> = [
{title: 'Code', name: 'code',sort: 'asc'},
{title: 'Name', name: 'name', sort: 'asc'}
];
public page:number = 1;
public itemsPerPage:number = 10;
public maxSize:number = 5;
public numPages:number = 1;
public length:number = 0;
public config:any = {
paging: true,
sorting: {columns: this.columns},
filtering: {filterString: '', columnName: 'name'}
};
public data: Array<any> =[];
public constructor(private _languageService: LanguageService) {
this._languageService.getLanguages()
.subscribe(
languages =>this.languages =languages,
error => this.errorMessage = <any>error
)
this.length = this.data.length;
//this.data =[{"code":"en","name":"English"},{"code":"es","name":"Spanish"}];
//this.data =this.getLanguages();
// this.data =[{"code":"en","name":"English"},{"code":"es","name":"Spanish"}];
}
public ngOnInit():void {
this.onChangeTable(this.config);
// this.getLanguages();
}
public changePage(page:any, data:Array<any> = this.data):Array<any> {
let start = (page.page - 1) * page.itemsPerPage;
let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
return data.slice(start, end);
}
public changeSort(data:any, config:any):any {
if (!config.sorting) {
return data;
}
let columns = this.config.sorting.columns || [];
let columnName:string = void 0;
let sort:string = void 0;
for (let i = 0; i < columns.length; i++) {
if (columns[i].sort !== '') {
columnName = columns[i].name;
sort = columns[i].sort;
}
}
if (!columnName) {
return data;
}
// simple sorting
return data.sort((previous:any, current:any) => {
if (previous[columnName] > current[columnName]) {
return sort === 'desc' ? -1 : 1;
} else if (previous[columnName] < current[columnName]) {
return sort === 'asc' ? -1 : 1;
}
return 0;
});
}
public changeFilter(data:any, config:any):any {
if (!config.filtering) {
return data;
}
let filteredData:Array<any> = data.filter((item:any) =>
item[config.filtering.columnName].match(this.config.filtering.filterString));
return filteredData;
}
public onChangeTable(config:any, page:any = {page: this.page, itemsPerPage: this.itemsPerPage}):any {
if (config.filtering) {
Object.assign(this.config.filtering, config.filtering);
}
if (config.sorting) {
Object.assign(this.config.sorting, config.sorting);
}
let filteredData = this.changeFilter(this.data, this.config);
let sortedData = this.changeSort(filteredData, this.config);
this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;
this.length = sortedData.length;
}
public getLanguages() {
return this._languageService
.getLanguages()
.subscribe(
languages => this.languages= languages,
error => this.errorMessage = <any>error);
}
}
从'@angular/core'导入{Injectable，bind}；
从'@angular/Http'导入{Http，Response}；
导入“rxjs/add/operator/toPromise”；
从“./Language”导入{Language}；
从“rxjs/Observable”导入{Observable}；
从“@angular/common”导入{APP_BASE_HREF}；
@可注射（）
导出类语言服务{
私有语言surl='../languages/get_all_languages'；//指向webapi的URL
构造函数（私有http:http）{}
getLanguages（）：可观察{
返回this.http.get（this.languagesUrl）
.map（（响应数据）=>{
返回responseData.json（）；
})
.接住（这个.把手错误）；
}
getAllLanguages（）{
返回this.http.get（this.languagesUrl.map（res=>res.json（））；
}
私有句柄错误（错误：任意）{
让errMsg=（error.message）？error.message：
error.status？`${error.status}-${error.statusText}`:'服务器错误'；
返回可观察抛出（errMsg）；
}
}
import { Injectable,bind} from '@angular/core';
import { Http,Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Language} from './language';
import { Observable } from 'rxjs/Observable';
import {APP_BASE_HREF} from '@angular/common';
@Injectable()
export class LanguageService {
private languagesUrl = '../languages/get_all_languages'; // URL to webapi
constructor(private http: Http) { }
getLanguages(): Observable<Language[]> {
return this.http.get(this.languagesUrl)
.map((responseData) => {
return responseData.json();
})
.catch(this.handleError);
}
getAllLanguages(){
return this.http.get(this.languagesUrl).map(res => res.json());
}
private handleError (error: any) {
let errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
return Observable.throw(errMsg);
}
}
import { Component,OnInit} from '@angular/core';
import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf} from '@angular/common'
import { Language } from './language';
import { LanguageService } from './language.service';
import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table'
import { Observable} from 'rxjs/Observable';
import {TableData} from './table-data';
@Component({
selector: 'languages_list',
templateUrl: '../app/core/Languages/language-list.component.html',
styleUrls: ['../app/core/Languages/language.component.css'],
directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES, NgClass, NgIf, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class LanguageComponent implements OnInit {
languages: Language[];
errorMessage: string;
mode = 'Observable';
public rows:Array<any> = [];
public columns:Array<any> = [
{title: 'Code', name: 'code',sort: 'asc'},
{title: 'Name', name: 'name', sort: 'asc'}
];
public page:number = 1;
public itemsPerPage:number = 10;
public maxSize:number = 5;
public numPages:number = 1;
public length:number = 0;
public config:any = {
paging: true,
sorting: {columns: this.columns},
filtering: {filterString: '', columnName: 'name'}
};
public data: Array<any> =[];
public constructor(private _languageService: LanguageService) {
this._languageService.getLanguages()
.subscribe(
languages =>this.languages =languages,
error => this.errorMessage = <any>error
)
this.length = this.data.length;
//this.data =[{"code":"en","name":"English"},{"code":"es","name":"Spanish"}];
//this.data =this.getLanguages();
// this.data =[{"code":"en","name":"English"},{"code":"es","name":"Spanish"}];
}
public ngOnInit():void {
this.onChangeTable(this.config);
// this.getLanguages();
}
public changePage(page:any, data:Array<any> = this.data):Array<any> {
let start = (page.page - 1) * page.itemsPerPage;
let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
return data.slice(start, end);
}
public changeSort(data:any, config:any):any {
if (!config.sorting) {
return data;
}
let columns = this.config.sorting.columns || [];
let columnName:string = void 0;
let sort:string = void 0;
for (let i = 0; i < columns.length; i++) {
if (columns[i].sort !== '') {
columnName = columns[i].name;
sort = columns[i].sort;
}
}
if (!columnName) {
return data;
}
// simple sorting
return data.sort((previous:any, current:any) => {
if (previous[columnName] > current[columnName]) {
return sort === 'desc' ? -1 : 1;
} else if (previous[columnName] < current[columnName]) {
return sort === 'asc' ? -1 : 1;
}
return 0;
});
}
public changeFilter(data:any, config:any):any {
if (!config.filtering) {
return data;
}
let filteredData:Array<any> = data.filter((item:any) =>
item[config.filtering.columnName].match(this.config.filtering.filterString));
return filteredData;
}
public onChangeTable(config:any, page:any = {page: this.page, itemsPerPage: this.itemsPerPage}):any {
if (config.filtering) {
Object.assign(this.config.filtering, config.filtering);
}
if (config.sorting) {
Object.assign(this.config.sorting, config.sorting);
}
let filteredData = this.changeFilter(this.data, this.config);
let sortedData = this.changeSort(filteredData, this.config);
this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;
this.length = sortedData.length;
}
public getLanguages() {
return this._languageService
.getLanguages()
.subscribe(
languages => this.languages= languages,
error => this.errorMessage = <any>error);
}
}
从'@angular/core'导入{Component，OnInit}；
从“@angular/common”导入{CORE_指令、FORM_指令、NgClass、NgIf}
从“./Language”导入{Language}；
从“./language.service”导入{LanguageService}；
从“ng2引导/ng2引导”导入{PAGINATION_指令}；
从'ng2 TABLE/ng2 TABLE'导入{NG_TABLE_指令}
从“rxjs/Observable”导入{Observable}；
从“./table data”导入{TableData}；
@组成部分({
选择器：“语言列表”，
templateUrl:“../app/core/Languages/language list.component.html”，
样式URL:['../app/core/Languages/language.component.css']，
指令：[NG_表_指令、分页_指令、NgClass、NgIf、核心_指令、表单_指令]
})
导出类LanguageComponent实现OnInit{
语文：语文[]；
错误消息：字符串；
模式=‘可观察’；
公共行：数组=[]；
公共列：数组=[
{标题：'Code'，名称：'Code'，排序：'asc'}，
{title:'Name'，Name:'Name'，sort:'asc'}
];
公共页面：编号=1；
公共项目页面：编号=10；
公共最大大小：数字=5；
公共数字：数字=1；
公共长度：数字=0；
公共配置：任意={
是的，
排序：{columns:this.columns}，
筛选：{filterString:''，columnName:'name'}
};
公共数据：数组=[]；
公共构造函数（专用语言服务：语言服务）{
这是。_languageService.getLanguages（）
.订阅(
语言=>this.languages=语言，
error=>this.errorMessage=错误
)
this.length=this.data.length；
//this.data=[{“code”：“en”，“name”：“English”}，{“code”：“es”，“name”：“西班牙语”}]；
//this.data=this.getLanguages（）；
//this.data=[{“code”：“en”，“name”：“English”}，{“code”：“es”，“name”：“西班牙语”}]；
}
public ngOnInit（）：void{
this.onChangeTable（this.config）；
//这个.getLanguages（）；
}
publicchangepage（page:any，data:Array=this.data）：数组{
让开始=（page.page-1）*page.itemsPerPage；
让end=page.itemsPerPage>-1？（start+page.itemsPerPage）：data.length；
返回data.slice（开始、结束）；
}
公共变更排序（数据：任意，配置：任意）：任意{
如果（！config.sorting）{
返回数据；
}
让columns=this.config.sorting.columns | |[]；
让columnName:string=void 0；
让排序：string=void 0；
for（设i=0；i{
if（上一个[columnName]>当前的[columnName]）{
返回排序=='desc'？-1:1；
}else if（以前的[columnName]<当前的[columnName]）{
返回排序=='asc'？-1:1；
}
返回0；
});
}
公共changeFilter（数据：any，配置：any）：any{
如果（！config.filtering）{
返回数据；
}
让filteredData:Array=data.filter（（项：任意）=>
项[config.filtering.columnName].match（this.config.filtering.filterString））；
返回过滤器数据；
}
public onChangeTable（config:any，page:any={page:this.page，itemsPerPage:this.itemsPerPage}）：any{
if（config.filtering）{
分配（this.config.filtering，config.filtering）；
}
if（config.sorting）{
分配（this.config.sorting，config.sorting）；
}
让filteredData=this.changeFilter（this.data，this.config）；
让sortedData=this.changeSort（filteredData，this.config）；
this.rows=page&&config.paging？this.changePage（page，sortedData）：sortedData；
this.length=sortedData.length；
}
公共语言（）{
返回此。\u语言服务
.getLanguages（）
.订阅(
语言=>this.languages=语言，
error=>this.errorMessage=error）；
}
}
public getLanguages() {
return this._languageService
.getLanguages()
.subscribe(
languages => this.languages= languages,
error => this.errorMessage = <any>error);
}
public-getLanguages（）{
返回此。\u语言服务
.getLanguages（）
.订阅(
语言=>this.languages=语言，
error=>this.errorMessage=error）；
}
谢谢我解决了在onChangeTable中调用服务并在subscribe方法中加载数据的问题
public onChangeTable(config:any, page:any = {page: this.page, itemsPerPage: this.itemsPerPage}):any {
if (config.filtering) {
Object.assign(this.config.filtering, config.filtering);
}
if (config.sorting) {
Object.assign(this.config.sorting, config.sorting);
}
this._languageService.getLanguages()
.subscribe(languages => {
this.data =languages;
this.length = this.data.length;
let filteredData = this.changeFilter(this.data, this.config);
let sortedData = this.changeSort(filteredData, this.config);
this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;
this.length = sortedData.length;
},error => this.errorMessage = <any>error)
}
public onChangeTable（config:any，page:any={page:this.page，itemsPerPage:this.itemsPerPage}）：any{
if（config.filtering）{