Javascript 如何在forEach循环中使用返回？

我有一个包含多个对象的数组，我想在

*ngFor

循环中使用它。 我想用一个

div

容器循环这个过程，并想向div容器中添加一个css类来显示相邻的容器。css类在对象中定义，我需要将其转换为有效类，如

col-sm-6

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

让我们看看我的代码：

数组：

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

HTML:

所以我想要得到的是第一个对象的类

col-sm-3

，第二个对象的类

col-sm-9

。并将每个对象的css类添加到该对象的div容器中

但是我的函数只返回

col-sm-9

。

---

如何确保两个对象都获得正确的类？

下面的示例如何

组件：

defineClass（类列表：字符串[]）{
const item=classList.find（x=>x.startsWith（“ColumnWidth”）；
返回'col sm-'+item？.charAt（item.length-1）；
}

模板：

{{column.title}}

下面的例子怎么样

组件：

defineClass（类列表：字符串[]）{
const item=classList.find（x=>x.startsWith（“ColumnWidth”）；
返回'col sm-'+item？.charAt（item.length-1）；
}

模板：

{{column.title}}

立柱模型的外观如何？请将其添加到问题中，您对列模型的含义是什么？这已经在问题中了，请参见数组部分（元素是模型）。为什么要对类属性使用数组？它可能有多个对象？它由多个对象组成，用户只能这样定义类。列模型是什么样子的？请将其添加到问题中，您对列模型的含义是什么？这已经在问题中了，请参见数组部分（元素是模型）。为什么要为类属性使用数组？它可能有多个对象？它由多个对象组成，用户只能这样定义类。如果有那么简单，我不会问这个问题。不幸的是，用户只能将这些类定义为：

ColumnWidthX

nice solution，这是可行的，但是我在返回行的const

项上得到了一个错误<代码>对象可能是“未定义的”

如果它这么简单，我就不会问这个问题。不幸的是，用户只能将这些类定义为：

ColumnWidthX

nice solution，这是可行的，但是我在返回行的const

项上得到了一个错误<代码>对象可能是“未定义的”

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