为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

眼眸繁星 2023-01-06 11:26:15

我有一个包含多个对象的数组,我想在*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. 我怎样才能确保两个对象都得到正确的类?


查看完整描述

1 回答

?
肥皂起泡泡

TA贡献1565条经验 获得超5个赞

下面的例子怎么样?


零件:


 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>


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信