多个 ngFor 不工作角度 4答案

【问题标题】：multiple ngFor is not working angular 4多个 ngFor 不工作角度 4
【发布时间】：2017-09-20 05:10:19
【问题描述】：

我正在尝试使用 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>

我收到如下错误

如何分块和填充这些值？

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

【问题讨论】：

我们甚至不知道您的数据是什么样的？您正在尝试迭代不是数组的东西，顺便说一句，使用*ngFor :)
我已经更新了this.states @AJT_82的console.log
@AJT_82 他需要做的就是在字段中添加一个点。{{state.myField}}。在具有嵌套 ngFor 的数组数组上使用 ngFor 没有任何问题
@Royi，我从一开始就怀疑它是一个属性，但我希望 OP 提供足够的信息，以便得到一个体面的答案；）
@Royi 我被设置为那个错误是它不是一个包含数组的数组，我失明了，我只是看到了一个包含对象的数组。现在我看到它是一个带有数组的数组：D 呃，也许我需要休息一下：D

标签： angular ngfor

【解决方案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 - 否则将无法正常工作。看到 plunkr
我正在使用 Angular 4，如果您注意到我的开发人员工具输出，该项目将转换为字符串。感谢您的宝贵时间。
@AlaksandarJesusGene 我的 plunker 也使用 Angular4。你能粘贴你的最终代码吗？我想看看你使用的 FINAL 代码。
@AlaksandarJesusGene 请仔细比较你的最终代码和 Royi 给你的代码......有什么区别？ ;)