Я не могу связать компонент Angular с одним маршрутом моего сервера (localhost: 3000 / list /: page?) - PullRequest
Новая
       41

Я не могу связать компонент Angular с одним маршрутом моего сервера (localhost: 3000 / list /: page?)

0 голосов
/ 29 января 2019

У меня проблема :(.

Я хочу разбить информацию в базе данных на страницы, чтобы заполнить таблицу, которая будет показана пользователю, я получил ее и попробовал с почтальоном:

Это маршрут в бэкэнде: 

    router.get('/list/:page?', listarController.listar);

Это функция в NodeJS и запрос для извлечения данных 

    controller.listar = async(request, response) => {
        var page = request.query.page;
        try {
            const result = await pool.query('SELECT * FROM "TP_DETALLE_DENUNCIA" LIMIT 10 OFFSET ' + (page * 10));
            return response.status(200).send({ data: result.rows });
        } catch (err) {
            console.log(err);
        }
    };
    module.exports = controller;`

Это будет маршрут для страницы #1: (ряды 1-10): localhost:3000/list/?page = 0

(ряды 11-20): localhost:3000/list/?page = 1

Это работает в Почтальоне!

![Backend working fine!

Но я не могу связать его с угловым, чтобы показать данные пользователю. Идея состоит в том, чтобы создать кнопку «Далее», которая увеличивает значение страницы на 1 идругая кнопка «предыдущая», которая уменьшает страницу на 1.

Это мой класс обслуживания, у которого есть метод, который подключается к nodejs 

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { DenunciaAnonima } from '../models/denunciaAnonima';
import { Global } from '../services/global';

@Injectable()
export class DenunciaService {
    public url: string;

    constructor(
        private _http: HttpClient
    ) {
        this.url = Global.url;
    }
    testService() {
        return 'Probando el servicio de Angular';
    }

    listarDenuncias(page): Observable<any> {
        let headers = new HttpHeaders().set('Content-Type','application/json');
        return this._http.get(this.url + 'list/' + page, { headers: headers });
    }
}
}

HTML этого компонента: 

<div class="container">
    <input type="button" value="Next" (click)="nextPage();">
</div>

Это component.ts компонента, который будет показывать данные пользователям: 

import { Component, OnDestroy, OnInit } from '@angular/core';
import { DenunciaAnonima } from '../../models/denunciaAnonima';
import { Subject } from 'rxjs';
import { DenunciaService } from '../../services/denunciaService';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers: [DenunciaService]
})
export class ListComponent implements OnInit {
  public page: number;
  public denuncias: DenunciaAnonima[];
  constructor(
    private _denunciaService: DenunciaService,
    private _router: Router,
    private _route: ActivatedRoute
  ) {
    this.page = 0;
  }

  ngOnInit() {}
      this.nextPage();
  }

  nextPage() {
    this._denunciaService.listarDenuncias(this.page).subscribe(response => {
      this.denuncias = response.data;
    },
      error => {
        console.log(<any>error);
      });
    this.page = this.page + 1;
  }
}

Наконец, Маршруты Angular: 

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'registros/:id', component: ListComponent } },
    { path: '**', component: ErrorComponent },
];

I'mбеспокоюсь, пожалуйста, если у кого-то есть предложения, это было бы здорово!Спасибо всем

1 Ответ

0 голосов
/ 29 января 2019

Вам придется использовать HttpParams.обратитесь к: https://angular.io/api/common/http/HttpParams

let params = new HttpParams().set('page', 1);

, и вы можете передать их через запрос на получение как

this._http.get(this.url + 'list/', { params: params });

...