Q:

multiple ngFor is not working angular 4

I am trying to populate chunked results using ngFor
 <div *ngFor="let item of states; let i = index">
                    <ul>
                        <li ngFor="let state of item">{{item}}</li>
                    </ul>
                </div>

If i populate item, i am getting this

The chunked results are converted to string
If i try populating state
<div *ngFor="let item of states; let i = index">
                    <ul>
                        <li ngFor="let state of item">{{state}}</li>
                    </ul>
                </div>

I get a blank output.
If * is used before second ngFor
 <div *ngFor="let item of states; let i = index">
                    <ul>
                        <li *ngFor="let state of item">{{state}}</li>
                    </ul>
                </div>

I get error as following
How can i chunk and populate the values?
Edit-1 & 2
Here is my data that is passed to ngFor (edit 2 as expanded object)

Edit 3
Here is my html output. The data is populating as string if i use 
<div class="split-by-4">
                <div *ngFor="let item of states; let i = index">
                    <ul>
                        <li ngFor="let state of item[i]">{{item}}</li>
                    </ul>
                </div>
            </div>

Working answer (actually my mistake)
{
$("#cities-with-state-modal").modal('open');

    this.chunkStates();
}
chunkStates(){
    this.states = _.cloneDeep(this.backup.states); // this.states is loading and its giving as string before the data got chunked.
    let chunkSize = _.toInteger(this.states.length/4);
    this.statesChunk = _.chunk(this.states, chunkSize);
  }

html
<div class="split-by-4" *ngIf="statesChunk && statesChunk.length">
                <div *ngFor="let item of statesChunk; let i = index">
                    <ul>
                        <li *ngFor="let state of item">{{state.name}}</li>
                    </ul>
                </div>
            </div>

A:

You have a typo : 
You forgot an asterix in <li ngFor. ( hence the error).
Also - 
You are iterating an array of arrays of objects. so you need a prop at the end.
The difference : see {{state.MyStateProperty}}
<div *ngFor="let item of states; let i = index">
   <ul>
        <li *ngFor="let state of item">{{state.MyStateProperty}}</li>
   </ul>
</div>

Here's a basic working plnkr  representing your nested structure.

