Спасибо "?" , * ngIf = "pageClient? .content" решить мою проблему
инаю реализовывать простую нумерацию страниц, используя Spring Rest и Angular 5, внутри моего углового сервиса, когда я вызываю свой веб-сервис сHTTPClient получить правильный ответ с запрошенной страницей, это правильно отображать данные на моей странице, но в веб-браузере консоли произошла ошибка, что внутри моей* ngFor цикл не может прочитать свойство undefined, хотя шаблон правильно отображает результаты:
Проблема в методе Service: getPageClient () и директиве * ngFor. Это журнал моей ошибки:
Это мой сервис, где я использовал наблюдаемое:
import { Injectable } from '@angular/core';
import {Client} from '../models/Client'
import {PageClient} from '../models/PageClient'
import { Observable, of } from 'rxjs';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import {catchError,map,tap} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ClientService {
private url = 'http://localhost:8099/api/clients';
private urlPage = 'http://localhost:8099/api/clients/get?page=0&size=3';
getClient(): Observable<Client[]>{
return this.http.get<Client[]>(this.url)
.pipe(
catchError(this.handleError('getClient', []))
);
}
getPageClient(): Observable<PageClient>{
return this.http.get<PageClient>(this.urlPage)
.pipe(
map(response => {
const data = response;
console.log(data.content);
return data ;
}));
}
constructor(private http : HttpClient) { }
private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
console.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
}
Это моя модель класса:
import {Client} from '../models/Client' ;
export class PageClient {
content : Client[];
totalPages : number;
totalElements : number;
last : boolean;
size : number ;
first : boolean ;
sort : string ;
numberOfElements : number ;
}
Это мой код компонента:
import { Component, OnInit } from '@angular/core';
import {Client} from '../models/Client' ;
import {PageClient} from '../models/PageClient'
import {ClientService} from '../services/client.service' ;
@Component({
selector: 'app-clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
clients : Client[];
pageClient : PageClient ;
getClient(): void {
this.clientService.getClient()
.subscribe(clients => this.clients = clients);
}
getPageClient(): void {
this.clientService.getPageClient()
.subscribe(page => this.pageClient = page);
}
constructor(private clientService : ClientService) { }
ngOnInit() {
this.getClient();
this.getPageClient();
}
}
И это моя часть шаблона, которая реализует нумерацию страниц:
<nav aria-label="...">
<ul class="pagination" *ngIf="pageClient.content" >
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li *ngFor="let page of pageClient.content ; let i=index " class="page-item"><a class="page-link" href="#">{{i}}</a></li>
<!-- <li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>-->
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
Может кто-нибудь помочь мне найти проблему с моим Observable Спасибо заранее