html - 在 html 页面的 Angular 应用程序中显示存储在 mongodb 中的 NestJs api 数据/数据

Question

我想在 Angular 前端页面上显示所有数据（类型）。但我面临着如何做到这一点的困难，或者如何在 html 页面中引入数据。Angular 与 NestJS api 和 MongoDB 相连。

Angular 项目的 html 文件，我想在表单下方的表结构中显示数据库中存在的所有数据，但遇到困难如何将表中的所有字段显示，并且 ID 由 MongoDb 自动生成

 <form [formGroup]="GenreForm">
      <label for="name">ID: </label>
      <input name="name" type="text" [formControl]="id" /><br /><br />
    
      <label for="name">Name: </label>
      <input name="name" type="text" formControlName="name" /><br /><br />
    
      <label for="name">Floor: </label>
      <input name="name" type="text" formControlName="floor" /><br /><br />
    
      <label name="name">Genre Number: </label>
      <input name="name" type="text" formControlName="genre_number" /><br /><br />
    
      <label for="name">Shelves: </label>
      <input name="name" type="text" formControlName="shelves" /><br /><br />
      <button (click)="getallgenres()">All Genres</button><br /><br />
      <button (click)="addgenres()">Add Genres</button><br /><br />
      <button (click)="putupdateGenres()">Put Update Genres</button><br /><br />
    </form>

    <table style="width: 100">
      <tr>
       <th>ID</th>
    <th>Name</th>
    <th>Floors</th>
    <th>Genre Number</th>
    <th>Shelves</th>
      </tr>
      <tr>
        <td>{{}}</td>
        <td>{{}}</td>
        <td>{{}}</td>
        <td>{{}}</td>
        <td>{{}}</td>

      </tr>
      <tr></tr>
    </table>

Angular 的 component.ts 文件

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ApiService } from './api.service';

@Component({
  selector: 'app-genres',
  templateUrl: './genres.component.html',
  styleUrls: ['./genres.component.css'],
})
export class GenresComponent implements OnInit {
  id = new FormControl('');
  GenreForm = new FormGroup({
    name: new FormControl(''),
    floor: new FormControl(''),
    genre_number: new FormControl(''),
    shelves: new FormControl(''),
  });
  constructor(private readonly apiService: ApiService) {}

  ngOnInit() {}
  getallgenres() {
    this.apiService.getallgenres().subscribe((result) => {
      console.log(result);
    });
  }
  addgenres() {
    this.apiService.addgenres(this.GenreForm.value).subscribe((result) => {
      console.log(result);
    });
  }

  async putupdateGenres() {
    (
      await this.apiService.putupdategenre(this.id.value, this.GenreForm.value)
    ).subscribe((result: any) => {
      console.log(result);
    });
  }
  async patchupdateGenres() {
    this.apiService
      .patchupdategenres(this.id.value, this.GenreForm.value)
      .subscribe((result: any) => {
        console.log(result);
      });
  }
  deletegenres() {
    this.apiService.deletegenres(this.id.value).subscribe((result) => {
      console.log(result);
    });
  }
}

Angular 项目的 api.service.file（以防有人需要）

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Genres } from './genres_schema';

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  API_SERVER = 'http://localhost:3000';
  constructor(private httpclient: HttpClient) {}

  public getallgenres() {
    return this.httpclient.get<Genres[]>(`${this.API_SERVER}/genres`);
  }
  public getdepartmentbyid(genreID: Genres) {
    return this.httpclient.get<Genres>(
      `${this.API_SERVER}/genres/${genreID}/singlegenres`
    );
  }
  async getallBooksofSingleGenere(name: string) {
    return this.httpclient.get<Genres>(
      `${this.API_SERVER}/genres/${{ genres_name: name }}/bookofsinglegenres`
    );
  }
  public addgenres(genres: Genres) {
    return this.httpclient.post<Genres>(`${this.API_SERVER}/genres`, genres);
  }
  public putupdategenre(genre_id: string, body: any) {
    let params = new HttpParams().set('ID', genre_id).set('Body', body);
    return this.httpclient.put<Genres>(
      `${this.API_SERVER}/genres/putupdate/${params}`,
      { params }
    );
  }
  public patchupdategenres(genre_id: Genres, body: any) {
    return this.httpclient.put<Genres>(
      `${this.API_SERVER}/genres/${genre_id}/patchupdate`,
      genre_id
    );
  }

  public deletegenres(id: number) {
    return this.httpclient.delete(`${this.API_SERVER}/genres/${id}`);
  }
}

标签： htmlangularmongodb