Angular: наблюдаемый сервис не получает данные от API - PullRequest
Новая
       15

Angular: наблюдаемый сервис не получает данные от API

0 голосов
/ 27 декабря 2018

Я начал использовать MatTableDataSource вместо DataSource, и у меня возникла проблема с получением данных из API.Когда я использую booking объект в качестве константного массива, он работает нормально.Но когда я хочу использовать сервис, который будет получать данные из API, к сожалению, он не работает, и мой paginator показывает 0 элементов.Ниже я размещаю свои файлы:

booking-table.component.ts 

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import {BookingService} from "../../service/booking.service";

export interface BookingI {
  id: number;
  bookingDate: string;
  bookingTime: string;
  date: string;
  time: string;
  boardId: number;
  employeeId: number;
  personalData: string;
  phoneNumber: number;
  description: string;
}

@Component({
  selector: 'app-booking-table',
  templateUrl: './booking-table.component.html',
  styleUrls: ['./booking-table.component.css'],
})

export class BookingTableComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  dataSource: MatTableDataSource<BookingI>;

  displayedColumns = ['id', 'personalData', 'phoneNumber'];

  booking: BookingI[] = [];

  constructor(private bookingService: BookingService) {

    this.bookingService.getAllBookings()
      .subscribe(value => this.booking = value);

    this.dataSource = new MatTableDataSource(this.booking);
    console.log(this.dataSource);
  }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}

booking.service.ts 

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from "@angular/common/http";
import {Observable} from "rxjs";
import {Booking} from "../model/booking";
import {catchError} from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class BookingService {

  private httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
  };

  constructor(private http: HttpClient) {
  }

  getAllBookings(): Observable<Booking[]> {
    const url = 'http://localhost:8080/bookings';
    return this.http.get<Booking[]>(url)
      .pipe(catchError(this.handleError));
  }

  private handleError(error: any): Promise<any> {
    console.error('Error', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

booking-table.component.html 

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
      <td mat-cell *matCellDef="let booking">{{booking.id}}</td>
    </ng-container>

    <ng-container matColumnDef="personalData">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Dane klienta</th>
      <td mat-cell *matCellDef="let booking">{{booking.personalData}}</td>
    </ng-container>

    <ng-container matColumnDef="phoneNumber">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Nr telefonu</th>
      <td mat-cell *matCellDef="let booking">{{booking.phoneNumber}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let booking; columns: displayedColumns;">
    </tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Может кто-нибудь написать, что не так с моим методом get.Просто для ясности, когда я использую DataSource, он работает нормально, но когда я использую метод MatTableDataSource, метод get не работает.

1 Ответ

0 голосов
/ 27 декабря 2018

Хорошей практикой является использование constructor только для инъекций и использование методов хука, например, ngOnInit для остальных.Попробуйте заменить ваш код на что-то вроде этого: 

constructor(private bookingService: BookingService) {
}

ngOnInit() {

    this.bookingService.getAllBookings().subscribe(value => {
        console.log(value);
        this.dataSource = value;
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    });
}
...