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

Question

我有一个包含多个对象的数组，我想在*ngFor循环中使用它。我想用一个div容器循环这个，并想将一个 css 类添加到 div 容器以显示彼此相邻的容器。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>