0

我有一个网络服务来发布一些数据来创建配置文件，

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

当我尝试从表单上的所有内容中发布数据时，它工作正常

但下拉菜单中所选选项的选项值不会发布

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

我问了后端团队，他们告诉我，我没有在 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>

我的组件 ts：

name: any[];
logo: any[];
vision: any[];
mission: any[];
address: any[];
emails: any[] = [];
numbers: any[] = [];
school_id: any[];
district_id: any[];
// latitude: any[];
// longitude: any[];
numbertitle: number;
number: number;
private url = 
'https://crm.easyschools.org/api/en/schools/create/create';
 countries: any[] = []; 
 cities: any[] = []; 
 districts: any[] = []; 
imageFile: any;
schoolyears: any[] = [];
start_date: string;
end_date: string;
name_en: any[] = [];
id: number[] = [];
type: any[] = [];


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].id)
[0].districts;
 }

onChangeCity(cityId: number) {
this.districts = this.cities.filter(x => x.id == cityId)[0].districts;
 }


private getMyBlog() {
return this._http.get('http://crm.easyschools.org/api/en/regions')
// .map((res) => res.json())
  .subscribe(countries => {
    this.countries = countries.data;
    console.log(countries);
    this.cities = this.countries.filter(x => x.id === 1)[0].cities;
    this.districts = this.cities.filter(x => x.id === 1)[0].districts;
  });
 }
 getFile(event){
 this.imageFile =  event.target.files[0];
 }
 onSubmit(form: NgForm) {
 var data = form.value;
 let formData: FormData = new FormData();
 // debugger;

 formData.append('logo', this.imageFile, this.imageFile.name);
 formData.append('name', data.name1);
 formData.append('vision', data.vision);
 formData.append('mission', data.mission);
 formData.append('address', data.address);
 formData.append('latitude', 1);
 formData.append('longitude', 1);
 formData.append('district_id', data.districts);
 formData.append('emails[0][title]', data.title);
 formData.append('emails[0][email]', data.email);
 formData.append('numbers[0][title]', data.numbertitle);
 formData.append('numbers[0][number]', data.number);
 formData.append('schoolyears[0][start_date]', data.start_date);
 formData.append('schoolyears[0][end_date]', data.end_date );
 formData.append( 'schooltypes[0][type_id]', 1 );

 this._http.post(this.url, formData)
  .subscribe(response => {
    // debugger;
    console.log(response);
  }, (err: HttpErrorResponse) => {
    console.log(err);
  });

 }

当我在邮递员上尝试 Web 服务 API 并给它一个数字 (1) 时，它给了我 scode 200，问题在于 HTML 中的输入以正确读取值

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

随意尝试邮递员上的 API

4

2 回答 2

2

解决方案 1（多个值）

组件.ts

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

组件.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>
...

解决方案 2：

组件.ts

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

组件.html

...
<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>
...
于 2018-02-08T12:35:57.080 回答
0

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

onChangeCity($event.target.options[$event.target.selectedIndex].value)
于 2018-02-08T12:39:46.620 回答