我有一个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>我的组件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);
});
}当我在postman上尝试web服务API并给它一个数字(1)时,它给了我scode 200,问题是HTML内部的输入可以正确读取值。
如果有什么遗漏或者您需要更多的细节,只需评论一下,我将提供您所需的所有数据,我需要知道district_id部件的问题所在。
可以在邮递员上试用API。
发布于 2018-02-08 12:35:57
解决方案1(多值)
component.ts
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>
...解决方案2:
component.ts
district_id: number;
...
...
...
onSubmit(form: NgForm) {
...
`formData.append('district_id', this.district_id);`
...
}component.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-08 12:39:46
您可以按以下方式更新更改回调:
onChangeCity($event.target.options[$event.target.selectedIndex].value)https://stackoverflow.com/questions/48685034
复制相似问题