动态列表渲染在angular 5中

我有一个数组，我想显示一个列表，这样当前页面被分成3个pre标记，列表中的所有元素都应该分布在这3个标记中

---

提前感谢

Angular为切片管道提供了ngFor循环。希望以下内容对您有所帮助：

TS代码：

// This is your results array
    steps = [
        {
            id: 1,
            name: 'Step 1'
        },
        // .... Add more steps
    ];

    // As you have 3 colums I have put 3 static here.
    getMinSlice(columnIndex) {
        return Math.ceil((this.steps.length / 3) * (columnIndex - 1));
    }

    getMaxSlice(columnIndex) {
        return Math.ceil((this.steps.length / 3) * columnIndex);
    }

       <div class="col-md-12">
            <div class="col-md-4">
                <div *ngFor="let b of steps | slice:getMinSlice(1):getMaxSlice(1)">{{b.name}}</div>
            </div>
            <div class="col-md-4">
                <div *ngFor="let b of steps | slice:getMinSlice(2):getMaxSlice(2)">{{b.name}}</div>
            </div>
            <div class="col-md-4">
                <div *ngFor="let b of steps | slice:getMinSlice(3):getMaxSlice(3)">{{b.name}}</div>
            </div>
        </div>

HTML代码：

// This is your results array
    steps = [
        {
            id: 1,
            name: 'Step 1'
        },
        // .... Add more steps
    ];

    // As you have 3 colums I have put 3 static here.
    getMinSlice(columnIndex) {
        return Math.ceil((this.steps.length / 3) * (columnIndex - 1));
    }

    getMaxSlice(columnIndex) {
        return Math.ceil((this.steps.length / 3) * columnIndex);
    }

       <div class="col-md-12">
            <div class="col-md-4">
                <div *ngFor="let b of steps | slice:getMinSlice(1):getMaxSlice(1)">{{b.name}}</div>
            </div>
            <div class="col-md-4">
                <div *ngFor="let b of steps | slice:getMinSlice(2):getMaxSlice(2)">{{b.name}}</div>
            </div>
            <div class="col-md-4">
                <div *ngFor="let b of steps | slice:getMinSlice(3):getMaxSlice(3)">{{b.name}}</div>
            </div>
        </div>

{{b.name}
{{b.name}
{{b.name}

是。我已经测试过了。