多个 ngFor 不工作 angular 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 中忘记了一个星号。（因此错误）。

还有 -

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

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

多个 ngFor 不工作 angular 4

multiple ngFor is not working angular 4

ngfor

angular