Я изучаю Nativescript, я застрял в одном сценарии, где я создал список стран, штатов и городов.

Question

Это мои данные component.ts

export class HomeComponent implements OnInit {

    countries: Array<any> = [
        { id: 0, name: 'India' },
        { id: 1, name: 'Afghanistan' },
        { id: 2, name: 'U.S' }
    ];

    selectedCountry = -1;
    selectedState = -1;

    states = [];
    cities = [];
    constructor() {
    }

    onSelectCountry(country_id: number) {
        this.selectedCountry = country_id;
        this.selectedState = -1;
        this.cities = [];
        this.states = this.getStates().filter((item) => {
            return item.country_id === Number(country_id)
        });
    }

    onSelectState(state_id: number) {
        console.log(state_id);
        this.selectedState = state_id;
        this.cities = this.getCity().filter((item) => {
            return item.state_id === Number(state_id)
        });
    }

    getStates() {
        return [
            { id: 1, country_id: 0, name: 'Maharashtra' },
            { id: 2, country_id: 0, name: 'Chhatisgarh' },
            { id: 3, country_id: 1, name: 'Badakhshan' },
            { id: 4, country_id: 1, name: 'Badghis' },
            { id: 5, country_id: 2, name: 'California' },
            { id: 6, country_id: 2, name: 'Texas' },
        ]
    }

    getCity() {
        return [
            { id: 1, state_id: 1, name: 'Pune' },
            { id: 2, state_id: 1, name: 'Mumbai' },
            { id: 3, state_id: 1, name: 'Gondia' },
            { id: 4, state_id: 1, name: 'Nagpur' },
            { id: 5, state_id: 2, name: 'Raipur' },
            { id: 6, state_id: 2, name: 'Bilaspur' },
            { id: 7, state_id: 2, name: 'Rajnandgaon' },
            { id: 8, state_id: 2, name: 'Durg' },
            { id: 9, state_id: 3, name: 'Jurm' },
            { id: 10, state_id: 3, name: 'Ishkashim' },
            { id: 11, state_id: 3, name: 'Khandud' },
            { id: 12, state_id: 4, name: 'Muqur' },
            { id: 13, state_id: 4, name: 'Murghab' },
            { id: 14, state_id: 5, name: 'Los Angeles' },
            { id: 15, state_id: 5, name: 'San Jose' },
            { id: 16, state_id: 5, name: 'Fresno' },
            { id: 17, state_id: 6, name: 'Houston' },
            { id: 18, state_id: 6, name: 'Dallas' },
        ]
    }

    ngOnInit(): void {
    }
}

Это мой HTML файл

<GridLayout>
    <ScrollView>
        <StackLayout class="home-panel">
            <!--Add your page content here-->
            <Label textWrap="true" text="Country :"
                class="h2 description-label"></Label>
            <ListPicker [items]="countries" textField="name" valueField="id"
                (selectedIndexChange)="onSelectCountry($event.value)"
                [(ngModel)]="selectedCountry">
            </ListPicker>

            <Label textWrap="true" text="States :"
                class="h2 description-label"></Label>
            <ListPicker [items]="states" textField="name" valueField="id"
                (selectedIndexChange)="onSelectState($states.value)"
                [(ngModel)]="selectedState">
            </ListPicker>

            <Label textWrap="true" text="Cities :"
                class="h2 description-label"></Label>
            <ListPicker [items]="cities" textField="name" valueField="id">

            </ListPicker>

        </StackLayout>
    </ScrollView>
</GridLayout>

Что я на самом деле хочу, так это когда я прокручиваю страну, тогда только то, что состояния страны должны быть видны, и когда я прокручиваю в штатах, тогда только то, что города штатов должны быть видны. Сейчас как-то странные штаты работают, но я не могу показать мудрые города штатов .. Пожалуйста, помогите мне.