首页 文章

多个ngFor不工作角4

提问于
浏览 次
2

我试图使用ngFor填充分块结果

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

如果我填充项目，我得到这个
enter image description here

The chunked results are converted to string

如果我尝试填充状态

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

我收到错误如下
enter image description here

我怎样才能填充和填充 Value 观？

Edit-1 & 2

这是传递给ngFor的数据（编辑2作为扩展对象）
enter image description here

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

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>

enter image description here

angular ngfor

1 回答

  • 1

    你有一个错字：

    你在 <li ngFor 忘记了一个星号 . （因此错误） .

    还 -

    您正在迭代 objects 的数组数组 . 所以你最后需要一个道具 .

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

    回复于

相关问题