为了提供一个国家列表供用户在填写地址信息时选择。我设计了一个地址ngForm来收集地址。此外,该表单还适用于用户编辑他们的地址信息,这意味着如果地址存在,则将首先修补所有现有值。这意味着现有的地址元素,例如国家/地区名称,将需要位于国家/地区列表的顶部,或者简单地从国家/地区列表中选择一个作为默认...即用户所在的国家/地区将在用户打开时显示他们的地址信息。他们还应该能够通过从列表中选择一个国家来更改为另一个国家。
使用以下 html 和 ts 代码,我几乎无法将用户的现有国家/地区显示为默认值。
<form #addressForm="ngForm" (ngSubmit)="onSubmit(addressForm.value)">
<div class="d-flex justify-content-end mb-1">
<button [disabled]="!addressForm.valid || !addressForm.dirty" type="submit" class="btn btn-sm btn-primary">
<span style="font-size: 0.8em">Save Address</span>
</button>
</div>
......
<div class="form-row">
<div class="form-group col-md-4">
<label for="state">State/Province/Region:</label>
<select
id="state" class="form-control" name="State" [(ngModel)]="state">
<option *ngFor="let state of states let i = index"
[selected]="i === 0"
[ngValue]="state">{{state}}
</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="country">Country:</label>
<select
id="country" class="form-control" name="Country" [(ngModel)]="country"
(change)="onCountrySelected($event.target.value)">
<option *ngFor="let country of countries let i = index"
[selected]="i === 0"
[ngValue]="country">{{country}}
</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="zipcode">Zip Code:</label>
<input
......
</div>
</div>
</form>
component.ts
getCountries() {
this.accountService.getUserAddress().subscribe((resp: IAddress) => {
this.address = resp;
if (this.address.country !== null)
{
this.memberService.getCountries().subscribe((resp: ICountry[]) => {
for (let country of resp)
{
this.countries.push(country.name);
}
this.countries = [this.address.country, ...this.countries];
this.states = [this.address.state, ...this.states];
});
} else {
this.memberService.getCountries().subscribe((resp: ICountry[]) => {
for (let country of resp)
{
this.countries.push(country.name);
}
this.countries = ['', ...this.countries];
}, error => {
console.log(error);
});
}
});
}
onCountrySelected(countryIdx: any) {
this.countryId = parseInt(countryIdx);
this.memberService.getStates(this.countryId).subscribe((resp: any[]) => {
this.states = [];
for (let state of resp)
{
this.states.push(state.name);
}
});
}
onSubmit(addressFormValues) {
console.log(addressFormValues);
this.accountService.updateUserAddress(addressFormValues).subscribe((address: IAddress) => {
this.toastr.success('Address saved');
}, error => {
this.toastr.error(error.message);
console.log(error);
});
}
或者,我也尝试分配从国家/地区列表中获得的国家/地区索引,以便直接选择开始时选择的国家/地区。这似乎不太奏效。
<!-- begin snippet: js hide: false console: true babel: false -->
相应地将html中的select改为:
<option *ngFor="let country of countries let i = index"
[selected]="i === countryIndex"
[ngValue]="country">{{country}}
</option>
我也尝试过 [selected]="address.country === country",我仍然无法将用户的现有国家/地区值设为默认选择。 除了这个问题,所有收集到的地址数据都可以成功提交到后端。
答案 0 :(得分:0)
我认为有一个错字
<option *ngFor="let county of countries let i = index"
[selected]="i === countryIndex"
[ngValue]="country">{{country}}
</option>
你应该使用county而不是country。