我正在为 Marvel API 制作一些应用程序
请求是显示来自 Marvel API 的字符列表，它只返回 20 个结果，我只能限制 100 个项目，但有超过 1500 个项目。这意味着我需要在 ngx-paginate 上创建带有偏移的角度分页。当我可以从 api 获取所有项目时，我使用了分页，ngx-paginate 会比它更容易，但是当我有这么多结果时，我从来没有用户服务器端分页。这就是我现在所拥有的，没有偏移，只有前 20 个结果。
应用程序，模块.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { Ng2OrderModule } from 'ng2-order-pipe';
import { Md5 } from 'ts-md5/dist/md5';
import { CharactersService } from './characters/characters.service';
import { NgxPaginationModule } from 'ngx-pagination';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CharactersListComponent } from './characters/characters-list/characters-list.component';
@NgModule({
declarations: [
AppComponent,
CharactersListComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AppRoutingModule,
Ng2SearchPipeModule,
Ng2OrderModule,
NgxPaginationModule,
],
providers: [CharactersService, Md5],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent]
})
export class AppModule { }
characters.service.ts
import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Md5 } from 'ts-md5/dist/md5';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
@Injectable()
export class CharactersService {
private _marvelCharacterUrl: string = "https://gateway.marvel.com:443/v1/public/characters";
private _publicKey: string = "c4b5296bc35888971631d22848916410";
private _privateKey: string = "fddd97e16368b2fee706a1f6de69f30f191467d3";
constructor(private _httpService: HttpClient, private _md5: Md5) { }
private getHash(timeStamp: string): string {
let hashGenerator: Md5 = new Md5();
hashGenerator.appendStr(timeStamp);
hashGenerator.appendStr(this._privateKey);
hashGenerator.appendStr(this._publicKey);
let hash: string = hashGenerator.end().toString();
return hash;
}
private getTimeStamp(): string {
return new Date().valueOf().toString();
}
getAllCharacters() {
let timeStamp = this.getTimeStamp();
let hash = this.getHash(timeStamp);
let requestUrl = this._marvelCharacterUrl + "?orderBy=name" + "&ts=" + timeStamp + "&apikey=" + this._publicKey + "&hash=" + hash;
return this._httpService.get(requestUrl);
}
getCharacterByName(name: string) {
let timeStamp = this.getTimeStamp();
let hash = this.getHash(timeStamp);
let requestUrl = this._marvelCharacterUrl + "?orderBy=name" + "&nameStartsWith=" + name + "&ts=" + timeStamp + "&apikey=" + this._publicKey + "&hash=" + hash;
return this._httpService.get(requestUrl);
}
}
字符列表.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { CharactersService } from '../characters.service';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-characters-list',
templateUrl: './characters-list.component.html',
styleUrls: ['./characters-list.component.css']
})
export class CharactersListComponent implements OnInit {
private characters: any = [];
constructor(private charactersService: CharactersService, private router: Router,
private activatedRoute: ActivatedRoute ) { }
ngOnInit() {
this.getCharacters();
}
private getCharacters(){
this.charactersService.getAllCharacters()
.subscribe(characters => {
this.characters = characters;
});
}
private getCharactersSearch(query: string) {
this.charactersService.getCharacterByName(query)
.subscribe(characters => {
this.characters = characters;
});
}
}
字符列表.component.html
<header>
<nav class="navbar navbar-default">
<a class="navbar-brand" href="#">Application</a>
</nav>
</header>
<div class="container">
<div class="row">
<nav class="navbar">
<input class="form-control" type="text" name="search" #searchTerm (keyup)="searchTerm.value.length ? getCharactersSearch(searchTerm.value) : getCharacters()">
</nav>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let character of characters.data.results | orderBy: key : reverse | paginate: { itemsPerPage: 10, currentPage: p }">
<td>{{character.id}}</td>
<td>{{character.name}}</td>
</tr>
</tbody>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</table>
</div>
</div>
这就是 JSON 的样子
{
"code": 200,
"status": "Ok",
"copyright": "© 2018 MARVEL",
"attributionText": "Data provided by Marvel. © 2018 MARVEL",
"attributionHTML": "<a href=\"http://marvel.com\">Data provided by Marvel. © 2018 MARVEL</a>",
"etag": "6bfc6364f1872b951cf3f51b95a38dc002c11830",
"data": {
"offset": 0,
"limit": 1,
"total": 1491,
"count": 1,
"results": [
{
"id": 1011334,
"name": "3-D Man",
"description": "",
"modified": "2014-04-29T14:18:17-0400",
"thumbnail": {
"path": "http://i.annihil.us/u/prod/marvel/i/mg/c/e0/535fecbbb9784",
"extension": "jpg"
},
"resourceURI": "http://gateway.marvel.com/v1/public/characters/1011334",
"comics": {
"available": 12,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011334/comics",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/21366",
"name": "Avengers: The Initiative (2007) #14"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/24571",
"name": "Avengers: The Initiative (2007) #14 (SPOTLIGHT VARIANT)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/21546",
"name": "Avengers: The Initiative (2007) #15"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/21741",
"name": "Avengers: The Initiative (2007) #16"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/21975",
"name": "Avengers: The Initiative (2007) #17"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/22299",
"name": "Avengers: The Initiative (2007) #18"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/22300",
"name": "Avengers: The Initiative (2007) #18 (ZOMBIE VARIANT)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/22506",
"name": "Avengers: The Initiative (2007) #19"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/8500",
"name": "Deadpool (1997) #44"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/10223",
"name": "Marvel Premiere (1972) #35"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/10224",
"name": "Marvel Premiere (1972) #36"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/10225",
"name": "Marvel Premiere (1972) #37"
}
],
"returned": 12
},
"series": {
"available": 3,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011334/series",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/series/1945",
"name": "Avengers: The Initiative (2007 - 2010)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/series/2005",
"name": "Deadpool (1997 - 2002)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/series/2045",
"name": "Marvel Premiere (1972 - 1981)"
}
],
"returned": 3
},
"stories": {
"available": 21,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011334/stories",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19947",
"name": "Cover #19947",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19948",
"name": "The 3-D Man!",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19949",
"name": "Cover #19949",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19950",
"name": "The Devil's Music!",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19951",
"name": "Cover #19951",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19952",
"name": "Code-Name: The Cold Warrior!",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/47184",
"name": "AVENGERS: THE INITIATIVE (2007) #14",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/47185",
"name": "Avengers: The Initiative (2007) #14 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/47498",
"name": "AVENGERS: THE INITIATIVE (2007) #15",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/47499",
"name": "Avengers: The Initiative (2007) #15 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/47792",
"name": "AVENGERS: THE INITIATIVE (2007) #16",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/47793",
"name": "Avengers: The Initiative (2007) #16 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/48361",
"name": "AVENGERS: THE INITIATIVE (2007) #17",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/48362",
"name": "Avengers: The Initiative (2007) #17 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/49103",
"name": "AVENGERS: THE INITIATIVE (2007) #18",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/49104",
"name": "Avengers: The Initiative (2007) #18 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/49106",
"name": "Avengers: The Initiative (2007) #18, Zombie Variant - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/49888",
"name": "AVENGERS: THE INITIATIVE (2007) #19",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/49889",
"name": "Avengers: The Initiative (2007) #19 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/54371",
"name": "Avengers: The Initiative (2007) #14, Spotlight Variant - Int",
"type": "interiorStory"
}
],
"returned": 20
},
"events": {
"available": 1,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011334/events",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/events/269",
"name": "Secret Invasion"
}
],
"returned": 1
},
"urls": [
{
"type": "detail",
"url": "http://marvel.com/characters/74/3-d_man?utm_campaign=apiRef&utm_source=0ed81a42460476df2ee6d83540bfbd8c"
},
{
"type": "wiki",
"url": "http://marvel.com/universe/3-D_Man_(Chandler)?utm_campaign=apiRef&utm_source=0ed81a42460476df2ee6d83540bfbd8c"
},
{
"type": "comiclink",
"url": "http://marvel.com/comics/characters/1011334/3-d_man?utm_campaign=apiRef&utm_source=0ed81a42460476df2ee6d83540bfbd8c"
}
]
}
]
}
}
我这里有 1 的限制，你可以看的更好