Angular 如何将select标记选项值附加到web服务中

我有一个网络服务来发布一些数据来创建个人资料

所以我有一个表格的下拉列表

当我尝试在表单上发布所有数据时，效果很好

但下拉菜单中所选选项的选项值不会过帐

它给了我“未定义”的错误

我问了后端团队，他们告诉我，我没有在JSON数组中绑定正确的数据

我需要知道什么是公布期权价值的正确方法

如果我在下拉列表中选择了多个选项，比如多选下拉列表，那么如何在数组中发布所有选项

以下是我的组件html：

<div class="row col-md-12" style="margin-bottom: 15px; text-align: 
center">
            <select name="country" class="rounded-inputs20 select-
select col-md-3" (change)="onChangeCountry($event.target.value)">
              <option *ngFor="let country of countries"  
[value]="country.id">{{country.name}}</option>
            </select>
            <select name="city" class="rounded-inputs20 select-select 
col-md-3"  (change)="onChangeCity($event.target.value)">
              <option *ngFor="let city of cities" [value]="city.id">
{{city.name}}</option>
            </select>
            <select name="districts"  class="rounded-inputs20 select-
select col-md-3">
              <option *ngFor="let district of districts" 
[value]="district.id">{{district.name}}</option>
            </select>
          </div>

当我在postman上尝试web服务API并给它一个数字（1）时，它给了我scode 200，问题在于HTML中的输入是否正确读取值

如果缺少任何信息或您需要更多详细信息，请发表评论，我将提供您所需的所有数据，我需要知道district_id部分有什么问题

请在邮递员上尝试API解决方案1（多值）

组件技术

district_id: number[] = [];
...
...
...
onSubmit(form: NgForm) {
    ...
    `formData.append('district_id', this.district_id);`
    ...
}

district_id: number;
...
...
...
onSubmit(form: NgForm) {
    ...
    `formData.append('district_id', this.district_id);`
    ...
}

component.html

...
<select multiple [(ngModel)]="district_id" name="districts" class="rounded-inputs20 select-select col-md-3">
        <option *ngFor="let district of districts" [value]="district.id">{{district.name}}</option>
</select>
...

...
<select [(ngModel)]="district_id" name="districts" class="rounded-inputs20 select-select col-md-3">
        <option *ngFor="let district of districts" [ngValue]="district.id">{{district.name}}</option>
</select>
...

component.html

...
<select multiple [(ngModel)]="district_id" name="districts" class="rounded-inputs20 select-select col-md-3">
        <option *ngFor="let district of districts" [value]="district.id">{{district.name}}</option>
</select>
...

...
<select [(ngModel)]="district_id" name="districts" class="rounded-inputs20 select-select col-md-3">
        <option *ngFor="let district of districts" [ngValue]="district.id">{{district.name}}</option>
</select>
...

。。。
{{地区名称}
...

解决方案1（多值）

组件技术

district_id: number[] = [];
...
...
...
onSubmit(form: NgForm) {
    ...
    `formData.append('district_id', this.district_id);`
    ...
}

district_id: number;
...
...
...
onSubmit(form: NgForm) {
    ...
    `formData.append('district_id', this.district_id);`
    ...
}

component.html

...
<select multiple [(ngModel)]="district_id" name="districts" class="rounded-inputs20 select-select col-md-3">
        <option *ngFor="let district of districts" [value]="district.id">{{district.name}}</option>
</select>
...

...
<select [(ngModel)]="district_id" name="districts" class="rounded-inputs20 select-select col-md-3">
        <option *ngFor="let district of districts" [ngValue]="district.id">{{district.name}}</option>
</select>
...

component.html

...
<select multiple [(ngModel)]="district_id" name="districts" class="rounded-inputs20 select-select col-md-3">
        <option *ngFor="let district of districts" [value]="district.id">{{district.name}}</option>
</select>
...

...
<select [(ngModel)]="district_id" name="districts" class="rounded-inputs20 select-select col-md-3">
        <option *ngFor="let district of districts" [ngValue]="district.id">{{district.name}}</option>
</select>
...

。。。
{{地区名称}
...

您可以按如下方式更新更改回调：

onChangeCity($event.target.options[$event.target.selectedIndex].value)

---

您可以按如下方式更新更改回调：

onChangeCity($event.target.options[$event.target.selectedIndex].value)

onChangeCountry（countryId:number）{this.cities=this.countries.filter（x=>x.id==countryId）[0]。cities；this.districts=this.cities.filter（x=>x.id==this.cities.filter（x=>x.id==this.citys.filter）[0]。districts；}onChangeCountry（countryId:number）{this.cities=this.countries.filter（x=>x.id==countryId）[0]。cities；this.districts=this.cities.filter（x=>x.id==this.cities[0].cities[0]。districts；}onChangeCity（cityId:number）{this.districts=this.cities.filter（x=>x.id==cityId==cityId）[0]。districts；}