Good Day Everyone!
PROBLEM: Failed to display a selected option from a dynamic ion-select
DESCRIPTION:
I have two ion-select (dropdown), one for the city field and one for the barangay field. The barangay field displays dynamic values based on the selected city. This works properly but when I try to display a selected value, it doesn’t work.
HTML
<!-- City -->
<ion-item class="form-field">
<ion-label stacked>City</ion-label>
<ion-select [(ngModel)]="city" (ionChange)="getBarangay('house')">
<ion-option value="Caloocan (NORTH) City" ng-selected="city == 'Caloocan (NORTH) City'">Caloocan City</ion-option>
<ion-option value="Caloocan (SOUTH) City" ng-selected="city == 'Caloocan (SOUTH) City'">Caloocan City</ion-option>
<ion-option value="Las Piñas City" ng-selected="city == 'Las Piñas City'">Las Piñas City</ion-option>
<ion-option value="Makati City" ng-selected="city == 'Makati City'">Makati City</ion-option>
<ion-option value="Malabon City" ng-selected="city == 'Malabon City'">Malabon City</ion-option>
<ion-option value="Mandaluyong City" ng-selected="city == 'Mandaluyong City'">Mandaluyong City</ion-option>
<ion-option value="Manila City" ng-selected="city == 'Manila City'">Manila City</ion-option>
<ion-option value="Marikina City" ng-selected="city == 'Marikina City'">Marikina City</ion-option>
<ion-option value="Muntinlupa City" ng-selected="city == 'Muntinlupa City'">Muntinlupa City</ion-option>
<ion-option value="Navotas City" ng-selected="city == 'Navotas City'">Navotas City</ion-option>
<ion-option value="Parañaque City" ng-selected="city == 'Parañaque City'">Parañaque City</ion-option>
<ion-option value="Pateros City" ng-selected="city == 'Pateros City'">Pateros City</ion-option>
<ion-option value="Pasay City" ng-selected="city == 'Pasay City'">Pasay City</ion-option>
<ion-option value="Pasig City" ng-selected="city == 'Pasig City'">Pasig City</ion-option>
<ion-option value="Quezon City" ng-selected="city == 'Quezon City'">Quezon City</ion-option>
<ion-option value="San Juan City" ng-selected="city == 'San Juan City'">San Juan City</ion-option>
<ion-option value="Taguig City" ng-selected="city == 'Taguig City'">Taguig City</ion-option>
<ion-option value="Valenzuela City" ng-selected="city == 'Valenzuela City'">Valenzuela City</ion-option>
<ion-option value="Other" ng-selected="city == 'Other'">Other</ion-option>
</ion-select>
</ion-item>
<!-- Barangay ** IF CITY IS SELECTED -->
<ion-item class="form-field" *ngIf="city != 'Other'">
<ion-label stacked>Barangay</ion-label>
<ion-select placeholder="Barangay" [(ngModel)]="barangayId" [disabled]="!barangayList" (ionChange)="setBarangay('house')">
<ng-container *ngFor="let bl of barangayList let i = index">
<ion-option ng-selected="barangay == barangayList[i].name" value="{{i}}">{{barangayList[i].name}}</ion-option>
</ng-container>
</ion-select>
<ion-label error-field no-margin *ngIf="!isBarangayValid"><ion-icon name="ios-alert"></ion-icon> Please select one.</ion-label>
</ion-item>
TYPESCRIPT
getBarangay(property) {
var city = property == 'house' ? this.city.replace(' City', '') : this.businessCity.replace(' City', '');
if (property == 'house') {
this.barangayList = [];
} else if (property == 'business') {
this.businessBarangayList = [];
}
if ((property == 'house' && this.city != 'Other') || (property == 'business' && this.businessCity != 'Other')) {
let headers = new Headers ({
'Accept' : 'application/json'
});
let options = new RequestOptions({ headers : headers });
return new Promise((resolve, reject) => {
this.http.post(this.apiBaseUrl + city + '/brgy', options)
.timeout(10000)
.toPromise()
.then((response) =>
{
// console.log('Get Barangay List API Response : ', response.json());
var _response = response.json();
if (property == 'house') {
for (let element in _response) {
this.barangayList.push({
name: element.trim(),
code: _response[element]
});
}
} else if (property == 'business') {
for (let element in _response) {
this.businessBarangayList.push({
name: element,
code: _response[element]
});
}
}
resolve(response.json());
})
.catch((error) =>
{
reject(error);
this.loadingSrvc.hide();
if (error.name == 'TimeoutError') {
this.timeOut(property);
} else {
this.serverErrorDialog(error);
}
});
});
}
}
setBarangay(property) {
if (property == 'house') {
this.barangayCode = this.barangayList[this.barangayId].code;
this.barangay = this.barangayList[this.barangayId].name;
} else if (property == 'business') {
this.businessBarangayCode = this.businessBarangayList[this.businessBarangayId].code;
this.businessBarangay = this.businessBarangayList[this.businessBarangayId].name;
}
}
Fig 1. There is no displayed/selected option
Fig 2. Displays all the barangay of a selected city
I hope someone can help me with this. Thank you 