如何解决Angular 中的级联下拉列表更新
我只想从级联下拉列表中更新城市,城市是通过国家/地区选择获取的,在后端 api 中,只有 city_Id 从所有级联下拉列表中存储。我的意思是国家不存储在数据库中。如何在更新表单中更新城市?
HTML
<mat-form-field appearance="outline">
<mat-label>Select Country</mat-label>
<mat-select (selectionChange)="onInputChange($event)" required>
<mat-option *ngFor="let Country of CountryList; let j=index" [value]="Country">
{{j + 1}} {{Country}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Select City</mat-label>
<mat-select formControlName="CityId" required>
<mat-option *ngFor="let i of CityList; let j=index" [value]="i.CityId">
{{j + 1}} {{i.City}}
</mat-option>
</mat-select>
</mat-form-field>
TS
//get Countries
fetchCountry(): void{
this.std_service.getCountry()
.subscribe(
data => {
this.CountryList = data;
//console.log(this.CountryList);
},error => {
console.log(error);
}
)
}
onInputChange(e){
console.log(e.value);
this.std_service.getCitiesfromCountry(e.value)
.subscribe(
data => {
this.CityList = data;
console.log(this.CityList);
},error => {
console.log(error);
}
)
}
//Update Code
// update Student
private UpdateStudent(){
this.std_service.UpdateStudent(this.id,this.form.value)
.pipe(first())
.subscribe({
next: () => {
this.router.navigate(['/home']);
this.snackBar.open('Successfully Updated','ok',{
duration: 3000
});
},error: error => {
this.snackBar.open(error,{
duration: 3000
});
this.loading = false;
}
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。