如何在 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

下面的例子怎么样？零件：&nbsp;defineClass(classList: string[]) {&nbsp; &nbsp;const item = classList.find(x => x.startsWith("ColumnWidth"));&nbsp; &nbsp;return 'col-sm-' + item?.charAt(item.length - 1);&nbsp;}模板：<div *ngFor="let column of elements" [ngClass]="defineClass(column.class)">&nbsp; <h1>{{column.title}}</h1></div>