多个ngFor不工作角4

Question

我正在尝试使用ngFor填充分组结果。

 <div *ngFor="let item of states; let i = index">
                    <ul>
                        <li ngFor="let state of item">{{item}}</li>
                    </ul>
                </div>

如果我填充项目，我就会得到这个

​

分块结果被转换为字符串

如果我尝试填充状态

<div *ngFor="let item of states; let i = index">
                    <ul>
                        <li ngFor="let state of item">{{state}}</li>
                    </ul>
                </div>

我得到一个空白输出。

如果*在第二个ngFor之前使用

 <div *ngFor="let item of states; let i = index">
                    <ul>
                        <li *ngFor="let state of item">{{state}}</li>
                    </ul>
                </div>

我得到的错误如下

​

我如何填充和填充这些值？

编辑-1& 2

下面是传递给ngFor的数据(编辑2作为扩展对象)

​

编辑3这里是我的html输出。如果我使用

<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>

工作答案(实际上是我的错误)

{
$("#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>

​

​

Answer 1

你有一个错误：

您在<li ngFor中忘记了一个asterix。(因此出现了错误)。

也-

您正在迭代对象数组的数组()。所以你最后需要一个道具。

区别:参见{{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.