title: multiple ngFor is not working angular 4
body: <p>I am trying to populate chunked results using ngFor</p>
  
  <pre><code> &lt;div *ngFor="let item of states; let i = index"&gt;
                      &lt;ul&gt;
                          &lt;li ngFor="let state of item"&gt;{{item}}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>If i populate item, i am getting this
  <a href="https://i.stack.imgur.com/9jbKx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9jbKx.png" alt="enter image description here"></a></p>
  
  <p><strong>The chunked results are converted to string</strong></p>
  
  <p>If i try populating state</p>
  
  <pre><code>&lt;div *ngFor="let item of states; let i = index"&gt;
                      &lt;ul&gt;
                          &lt;li ngFor="let state of item"&gt;{{state}}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>I get a blank output.</p>
  
  <p>If * is used before second ngFor</p>
  
  <pre><code> &lt;div *ngFor="let item of states; let i = index"&gt;
                      &lt;ul&gt;
                          &lt;li *ngFor="let state of item"&gt;{{state}}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>I get error as following<a href="https://i.stack.imgur.com/dvVWr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dvVWr.png" alt="enter image description here"></a></p>
  
  <p>How can i chunk and populate the values?</p>
  
  <p><strong>Edit-1 &amp; 2</strong></p>
  
  <p>Here is my data that is passed to ngFor (edit 2 as expanded object)
  <a href="https://i.stack.imgur.com/pCpw1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pCpw1.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit 3</strong>
  Here is my html output. The data is populating as string if i use </p>
  
  <pre><code>&lt;div class="split-by-4"&gt;
                  &lt;div *ngFor="let item of states; let i = index"&gt;
                      &lt;ul&gt;
                          &lt;li ngFor="let state of item[i]"&gt;{{item}}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><strong>Working answer (actually my mistake)</strong></p>
  
  <pre><code>{
  $("#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);
    }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="split-by-4" *ngIf="statesChunk &amp;&amp; statesChunk.length"&gt;
                  &lt;div *ngFor="let item of statesChunk; let i = index"&gt;
                      &lt;ul&gt;
                          &lt;li *ngFor="let state of item"&gt;{{state.name}}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/8NsfX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8NsfX.png" alt="enter image description here"></a></p>