Angular 如何根据变量动态更改引导集合并确定何时添加行？

我需要根据一行已排序的数组更改该行的列数

下面的例子就是我想要的结果。喜剧必须是两排的。行动3。恐怖只有一个，但我似乎不知道如何用打字脚本做到这一点

var电影=[
{标题：“电影1”，类型：“喜剧”}，
{标题：“电影2”，类型：“喜剧”}，
{片名：“电影3”，类型：“动作”}，
{标题：“电影4”，类型：“动作”}，
{标题：“电影5”，类型：“动作”}，
{标题：电影6，类型：恐怖}
];

{{movie.title}
电影一
电影2
电影3
电影4
电影5
电影6
在组件中添加一个泛型数组

generes = ['action', 'comedy', 'horror']
// if it's dynamic you can get it from movies

然后，在模板中，您可以循环浏览generes和电影，如下所示：

<div class="form-row" *ngFor="let genere of generes>
    <ng-container *ngFor="let movie of movies;">
        <div *ngIf="movie.genere === genere"
        [ngClass]="{'col-3': genere !== 'action', 'col-6': genere === 'action'}">
        {{movie.title}}
        </div>
    </ng-container>
</div>