angular - 我无法将 Angular 组件与我的后端的一条路由链接（localhost:3000/list/:page?）

问题描述

我有个问题：（。

我想对数据库中的信息进行分页以填充将显示给用户的表格，我得到了它并用 Postman 尝试了它：

这是后端的路线：

    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

这适用于邮递员！

但我无法将它与角度链接以向用户显示数据。这个想法是创建一个按钮“next”，它增加page in 1的值，另一个按钮“previous”减少page in 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 },
];

如果有人有任何建议，我很担心，那就太好了！谢谢大家

标签： angularparametersroutesangular6angular7

angular - 我无法将 Angular 组件与我的后端的一条路由链接（localhost:3000/list/:page?）

问题描述

解决方案

推荐阅读