Angular/TypeScript - 地图收到 API - 来自多个表的数据

Question

我创建了我的后端并且 api-控制器工作正常。在前端，我已经为我的应用程序创建了模型：

book.model.ts

export class Book {
id : number;
autor: string;
title: string;
returnDate: Date;
numberOfExtensions: number;
cardId:number;
card?: Card;
status?:string;
}

card.model.ts

export class Card {
id : number;
validityDate: Date;
locked: boolean;
userId: number;
user?: User;}

和user.model.ts

export class User {
id : number;
firstName: string;
lastName: string;
balance: number;}

在前端服务中，我使用以下内容从 api 获取数据：

export class DataService {
constructor(private http: HttpClient) { }

  readonly baseURL = "https://localhost:44302/api";
  books: Book[];
  users: User[];
  cards: Card[];
  postId: number;

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

  async getBooks() {
    await this.http.get(this.baseURL + '/books')
      .toPromise()
      .then(result => this.books = result as Book[]);
  }
  async getCards() {
    await this.http.get(this.baseURL + '/cards')
      .toPromise()
      .then(result => this.cards = result as Card[]);
  }
  async getUsers() {
    await this.http.get(this.baseURL + '/users')
     .toPromise()
      .then(result => this.users = result as User[]);
  }
  async getData() {
    await this.getBooks();
    await this.getCards();
    await this.getUsers();
  }

最好先接收所有 SQL 数据吗？

下一步是映射。例如，对于每本书，我想用合适的 ID（伪代码）保存卡片：

book.card = card where book.cardId === card.id

对于每张卡，我想要卡的所有者用户：

card.user = user where card.userId === user.id

如有任何帮助，我将不胜感激！非常感谢

Answer 1

一种可能的解决方案是使用 forkJoin。当所有的 observables 都完成时，这将被触发。您可以在所有下载完成后操作您的数据。

export class DataService {
constructor(private http: HttpClient) { }

  readonly baseURL = "https://localhost:44302/api";
  books: Book[];
  users: User[];
  cards: Card[];
  postId: number;

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

  getBooks() {
    return this.http.get(this.baseURL + '/books');
  }
  getCards() {
    return this.http.get(this.baseURL + '/cards');
  }
  getUsers() {
    return this.http.get(this.baseURL + '/users');
  }
  getData() {
    const observableList: Observable<any>[] = [];
    
    observableList.push(getBooks());
    observableList.push(getUsers());
    observableList.push(getCards());
    
    forkJoin(observableList).subscribe(resultList => {
      this.books = resultList[0] as Book[];
      this.users = resultList[1] as User[];
      this.cards = resultList[2] as Card[];
      
      // Do "book.card = card where book.cardId === card.id"
      const cardMap: Map<number, Card> = new Map();
      for (const card of this.cards) {
        cardMap.set(card.id, card);
      }
      for (const book of this books) {
        const card = cardMap.get(book.cardId);
        book.card = card;
      }
      
      // Do "card.user = user where card.userId === user.id"
      const userMap: Map<number, User> = new Map();
      for (const user of this.users) {
        userMap.set(user.id, user);
      }
      for (const card of this.cards) {
        const user = userMap.get(card.userId);
        card.user = user;
      }
    });
  }

Angular/TypeScript - 地图收到 API - 来自多个表的数据

Angular/TypeScript - map received API-data from multiple tables

api

get

typescript

asp.net-core

angular