How to display 2 different array results in a single Angular view?

Question

I have 2 arrays that I'm getting from an API, which has no FK or anything else in common.

In my ts the results are OK, however, the view is empty.

Debug results are shown as comments in the below code:

ngOnInit():void {
        this.data.loadShul()
            .subscribe(success => {
                if (success) { //Debug Results: success = true
                    this.cafe = this.data.cafe,//Debug Results: Array(1) 0:{cafe:Array(5),restaurant :Array(5)}
                        this.restaurant = this.data.restaurant;
                }
            });
    }`

My view:

<ul>
    <li *ngFor="let sy of cafe">
        name: {{sy.name}}  
    </li> 
</ul>
<ul style="background-color:red"> 
    <li *ngFor="let mk of restaurants">
        {{ mk.id }}
    </li>
</ul>
Im getting empty Li tag. 

My json look like (EG Café):

`[
    {
               "cafe": [
            {
                "id": 1,
                "name": "TestCafe  ",
                "style": "dairy cafe"
            },
            {
                "id": 2,
                "name": "cafe test ",
                "style": "vegan"
            },
            {
                "id": 3,
                "name": "AnyCaffe  ",
                "style": "bakery"
            },
            {
                "id": 4,
                "name": "Pastry    ",
                "style": "Breads and \u0086Pastry\u0087"
            },
            {
                "id": 5,
                "name": "Fantastic ",
                "style": "pizza"
            }
        ],`

Answer 1

Your code is fine you need to change in html like this

  *ngFor="let sy of cafe[0]?.cafe

Hope this will show you li tags..