Question

我有一个看起来像这样的对象：

{
    Label 1 : [Item 1,Item 2,Item 3],
    Label 2 : [Item 1,Item 2,Item 3],
    Label 3 : [Item 1,Item 2,Item 3],
    Label 4 : [Item 1,Item 2,Item 3],
    Label 5 : [Item 1,Item 2,Item 3],
    Label 6 : [Item 1,Item 2,Item 3],
}

使用Angular 5- 我想像这样显示它：

Label 1   Label 2   Label 3
Item 1    Item 1    Item 1
Item 2    Item 2    Item 2   
Item 3    Item 3    Item 3


Label 4   Label 5   Label 6
Item 1    Item 1    Item 1
Item 2    Item 2    Item 2   
Item 3    Item 3    Item 3

我认为我需要一个“ mod”运算符，Angular是否有？以及语法是什么，以及它如何适合显示的表或div（如上所述）。

我全神贯注。任何帮助表示赞赏。

每个Malard的请求-这是静态html的示例，我尝试将其替换为从服务器返回的对象驱动的数据。

<div class="row" >

    <div class="col-sm-4" >

        <div class="x-table" >

            <div class="x-table-header" >
                <span class="heading" >Label 1</span>
            </div>

            <div class="x-table-space" ></div>

            <div class="x-table-features" >
                <p>Item 1</p>
                <p>Item 2</p>
                <p>Item 3</p>
                <p>Item 4</p>
                <p>Item 5</p>
            </div>

        </div>

    </div>

    <div class="col-sm-4" >

        <div class="x-table" >

            <div class="x-table-header" >
                <span class="heading" >Label 2</span>
            </div>

            <div class="x-table-space" ></div>

            <div class="x-table-features" >
                <p>Item 1</p>
                <p>Item 2</p>
                <p>Item 3</p>
                <p>Item 4</p>
                <p>Item 5</p>
            </div>

        </div>

    </div>

    <div class="col-sm-4" >

        <div class="x-table" >

            <div class="x-table-header" >
                <span class="heading" >Label 3</span>
            </div>

            <div class="x-table-space" ></div>

            <div class="x-table-features" >
                <p>Item 1</p>
                <p>Item 2</p>
                <p>Item 3</p>
                <p>Item 4</p>
                <p>Item 5</p>
            </div>

        </div>

    </div>

</div>

<div class="row" >

    <div class="col-sm-4" >

        <div class="x-table" >

            <div class="x-table-header" >
                <span class="heading" >Label 4</span>
            </div>

            <div class="x-table-space" ></div>

            <div class="x-table-features" >
                <p>Item 1</p>
                <p>Item 2</p>
                <p>Item 3</p>
                <p>Item 4</p>
                <p>Item 5</p>
            </div>

        </div>

    </div>

</div>

Answer 1

我使用引导程序网格化为您创建了简单的stackblitz演示。

组件：

export class AppComponent  {
  data = [
    {label: 'Label 1', items: ['Item 1','Item 2','Item 3']},
    {label: 'Label 2', items: ['Item 1','Item 2','Item 3']},
    {label: 'Label 3', items: ['Item 1','Item 2','Item 3']},
    {label: 'Label 4', items: ['Item 1','Item 2','Item 3']},
    {label: 'Label 5', items: ['Item 1','Item 2','Item 3']},
    {label: 'Label 6', items: ['Item 1','Item 2','Item 3']}
  ];
}

模板：

<div class="container">
  <div class="row">
    <div *ngFor="let column of data" class="col-sm-4" >
      {{column.label}}
      <div *ngFor="let item of column.items">
        {{item}}
      </div>
    </div>
  </div>
</div>

如何在角度中进行for循环，但将其限制为“三跨”

1 个答案: