Currently, I am working on dynamically adding cities using ng-select in order to have search functionality while entering city names. For example, if I have two city names saved in a form and need to display them in separate ng-select controls when editing - for instance, the first control should default to New York and the second to Texas.
<div *ngFor="let savedEntry of savedEntries; let i = index;">
<ng-select [(ngModel)]="savedEntry.name" [id]="'city-id' + i" name="city">
<ng-option value="">Select</ng-option>
<ng-option *ngFor="let city of cities" [value]="city">
{{ city}}
</ng-option>
</ng-select>
</div>
Sample data:
public savedEntries: any[] = [
{ id: 1, name: 'Chicago' },
{ id: 2, name: 'New York' },
{ id: 3, name: 'Texas' }
];
public cities: string[] = ['San Diego', 'New York', 'Texas', 'Ohio', 'Chicago', 'Houston', 'Phoenix'];
I am attempting to preselect default cities, but encountering an error stating that ng-option does not support options. Any suggestions on how to resolve this issue?