Why Nested *ngFor does not work?

android

#1

Here is my data

const DATA= [
    {
        heading: "India",
        List: [
            { name: "Mumbai", ranking: "1" },
            { name: "Delhi", ranking: "2" },
            { name: "Bangalore", ranking: "3" },
        ]
    },
    {
        heading: "USA",
        List: [
            { name: "New York", ranking: "1" },
            { name: "Los Angeles", ranking: "2" },
            { name: "Chicago", ranking: "3" },
        ]
    },
    {
        heading: "China",
        List: [
            { name: "Guangzhou", ranking: "1" },
            { name: "Shanghai", ranking: "2" },
            { name: "Chongqing", ranking: "3" },
        ]
    }
];

This Code does not work

	<StackLayout *ngFor="let country of item">
		<label text={{country.heading}}>
		</label>
		<StackLayout *ngFor="let city of country">
			<label text={{city.name}}>
			</label>
		</StackLayout>
	</StackLayout>

Playground

Thanks in advance


#2

Ok. I got it working

changed

<StackLayout *ngFor="let city of country">

To

<StackLayout *ngFor="let city of country.List">

That was silly


#3

Thank You So Much !!! You save my Life :slight_smile: