我正在做一个CRUD应用程序。我想在数据库表中显示<select>中的值，而不是在<option>中指定它们。我在数据库中手动创建了一个国家表，我希望从数据库中的值显示为下拉菜单，而不是手动将它们指定为<select>，<option>。

我用Angular（前端），PostgreSQL（数据库）和Django（后端）创建了这个应用程序。这里是repository：GitHub| https://github.com/purushottamnawale/Tax-Authority-CRUD

app.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Tax } from './Tax';

@Injectable({
  providedIn: 'root'
})
export class TaxService {
  private url: string = 'http://localhost:8000/api/taxapp/';

  constructor(private http: HttpClient) { }

  addTax(tax: Tax): Observable<Tax> {
    return this.http.post<Tax>(this.url, tax);
  }

  getTaxes(): Observable<Tax[]> {
    return this.http.get<Tax[]>(this.url);
  }
  
  getTax(id: number): Observable<Tax> {
    return this.http.get<Tax>(`${this.url}${id}`);
  }
  
  getCountry(): Observable<Tax[]> {
    return this.http.get<Tax[]>(this.url); // Need modification here
  }

  updateTax(id: number, tax: Tax): Observable<Tax> {
    return this.http.put<Tax>(`${this.url}${id}/`, tax);
  }

  deleteTax(id: number): Observable<Tax> {
    return this.http.delete<Tax>(`${this.url}${id}/`);
  }

}

add-tax.component.html片段：

<!--Need modification here-->
<div class="col form-group">
    <label for="taxtype" class="form-label">Country Name</label>
    <select class="form-select" data-style="btn-primary" formControlName="country" name="country" id="country">
        <option value="India">India</option>
        <option value="USA">USA</option>
    </select>
</div> 

<!--
<div class="col form-group">
    <mat-form-field>
        <mat-label for="taxtype">Country Name</mat-label>
        <mat-select formControlName="country" name="country" id="country">
            <mat-option value="India">India</mat-option>
            <mat-option value="USA">USA</mat-option>
        </mat-select>
    </mat-form-field>
</div> -->

add-tax.component.ts：

import { Component } from '@angular/core';
import { TaxService } from 'src/app/app.service';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-add-tax',
  templateUrl: './add-tax.component.html',
  styleUrls: ['./add-tax.component.css']
})
export class AddTaxComponent {

  constructor(private service: TaxService, private router: Router) { }

  ngOnInit(): void {
  }

  data: any

  form = new FormGroup({
    name: new FormControl('', Validators.required),
    country: new FormControl('', Validators.required),
    taxtype: new FormControl('', Validators.required),
    zone: new FormControl('', Validators.required),
    ward: new FormControl('', Validators.required),
    status: new FormControl('', Validators.required),
  });

  addTax() {
    this.data = this.form.value;
    this.service.addTax(this.data).subscribe(data => {
      // redirect to home page
      this.router.navigate(['/']);
    });
  }
}

Django中的models.py：

from django.db import models

class Country(models.Model):
    country=models.CharField(max_length=50)

    def __str__(self):
        return self.name

# Create your models here
class Tax(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=255)
    # country = models.CharField(max_length=20)
    country = models.ForeignKey(Country,on_delete=models.CASCADE)
    taxtype = models.CharField(max_length=10)
    zone=models.CharField(max_length=255, null=True, blank=True)
    ward=models.CharField(max_length=255, null=True, blank=True)
    status = models.CharField(max_length=255, null=True, blank=True)

    def __str__(self):
        return self.name