Угловая 5 - Наблюдаемая ошибка возврата не может прочитать свойство неопределенного

Errabi Ayoub спросил: 13 июня 2018 в 09:44 в: javascript

Я начинаю внедрять простую разбивку на страницы, используя Spring Rest и Angular 5 внутри моего углового сервиса, когда я вызываю свой веб-сервис, используя httpClient a получить правильный ответ с запрошенной страницей, это отображать данные на моей странице правильно, но там есть ошибка в веб-браузере консоли, где ошибка внутри моего цикла ngFor не может прочитать свойство неопределенного хотя отображение шаблона корректно:

Проблема заключается в методе службы: 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>

Может ли кто-нибудь помочь мне найти проблему с моим Observabl eThanks заранее


1 ответ

Есть решение
user184994 ответил: 13 июня 2018 в 09:48

Поскольку функция getPageClient асинхронна, pageClient не определен, когда страница загружается первой. Это означает, что при выполнении pageClient.content вы получите сообщение об ошибке.

К счастью, Angular предоставляет полезный бит синтаксиса, который вы можете использовать в шаблоне, чтобы этого избежать. Вы должны использовать *ngIf="pageClient?.content" >.

? сообщает Angular только читать content, если pageClient не является нулевым / undefined.

Подробнее здесь

Errabi Ayoub ответил: 13 июня 2018 в 09:52
Спасибо "?" , ngIf ="pageClient? .content" разрешить мою проблему

Дополнительное видео по вопросу: Угловая 5 - Наблюдаемая ошибка возврата не может прочитать свойство неопределенного

Лекция 1: Понятие первообразной. Неопределенный интеграл. Свойства неопределенного интеграла.

Интегралы: Свойства неопределённого интеграла