如何从两个不同的数据库表中使用两个mat-chip列表在一个表单中完成？

const express = require('express');
const app = express();
const db = require('./db'); // 假设这是数据库连接模块

app.get('/api/dataA', async (req, res) => {
    const data = await db.TableA.findAll();
    res.json(data);
});

app.get('/api/dataB', async (req, res) => {
    const data = await db.TableB.findAll();
    res.json(data);
});

app.listen(3000, () => console.log('Server running on port 3000'));

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dual-chip-form',
  template: `
    <form>
      <mat-form-field>
        <mat-chip-list #chipListA>
          <mat-chip *ngFor="let item of dataA" [selectable]="selectable" [removable]="removable" (removed)="removeA(item)">
            {{item.name}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
        </mat-chip-list>
      </mat-form-field>

      <mat-form-field>
        <mat-chip-list #chipListB>
          <mat-chip *ngFor="let item of dataB" [selectable]="selectable" [removable]="removable" (removed)="removeB(item)">
            {{item.name}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
        </mat-chip-list>
      </mat-form-field>
    </form>
  `
})
export class DualChipFormComponent implements OnInit {
  dataA: any[] = [];
  dataB: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/api/dataA').subscribe(data => this.dataA = data);
    this.http.get('/api/dataB').subscribe(data => this.dataB = data);
  }

  removeA(item: any) {
    const index = this.dataA.indexOf(item);
    if (index > -1) {
      this.dataA.splice(index, 1);
    }
  }

  removeB(item: any) {
    const index = this.dataB.indexOf(item);
    if (index > -1) {
      this.dataB.splice(index, 1);
    }
  }
}