Question

我有一个包含多个对象的数组，我想在*ngFor循环中使用它。我想用一个div容器来循环它，并想在div容器中添加一个css类，以显示彼此相邻的容器。在对象中定义了CSS类，我需要将其转换为有效的类，例如col-sm-6。

因此，我创建了一个函数，以在对象中搜索css类并将其转换为有效的css类。但是我的函数只返回1个CSS类，而不是每个对象正确的CSS类。

让我们看看我的代码：

数组：

elements = [
    {
        title: 'Test1',
        class: ["ColumnWidth3"]
    },
    {
        title: 'Test2',
        class: ["ColumnWidth9"]
    }
]

HTML：

<div *ngFor="let column of elements" [ngClass]="columnClass()">
    <h1>{{column.title}}</h1>
</div>

功能：

columnClass() {
    const columnClass = this.elements.filter((child: any) => child.class.includes('ColumnWidth') >= 0);

    columnClass.forEach(element => {
      this.item = element.class.find((class:any) => class.indexOf('ColumnWidth') >= 0).split('ColumnWidth').pop();
    });
    
    return 'col-sm-' + this.item;
  }
}

所以我想要得到的是第一个对象的类col-sm-3和第二个对象的col-sm-9。并将每个对象的css类添加到该对象的div容器中。

但是我的函数仅返回col-sm-9。如何确保两个对象都获得正确的类？

Answer 1

以下示例如何？

组件：

 defineClass(classList: string[]) {
   const item = classList.find(x => x.startsWith("ColumnWidth"));
   return 'col-sm-' + item?.charAt(item.length - 1);
 }

模板：

<div *ngFor="let column of elements" [ngClass]="defineClass(column.class)">
  <h1>{{column.title}}</h1>
</div>

如何在Angular的forEach循环中使用返回值？

1 个答案: