*ngFor 在 Angular 中的不同 div 上答案

【问题标题】：*ngFor on different divs in Angular*ngFor 在 Angular 中的不同 div 上
【发布时间】：2022-08-10 14:51:30
【问题描述】：

我在一个看起来像这样的角度项目中有标记。

<div class=\"smallCard\" *ngFor=\"let popular of populars\">
    <img class=\"smallCardImg\" src={{popular.imageArticle}} alt=\"img1\">
    <h3>{{ popular.title }}</h3>
    <p>{{ popular.caption }}</p>      
    <div class=\"caption_container\">
        <img class=\"reactionImg\" src={{popular.imageUser}} alt=\"user\">
        <a class=\"reactionName\" href=\"\">{{ popular.nameUser }}</a>
        <ul class=\"reactions\">
            <img class=\"reactionsVector\" src=\"assets/img/Vector.svg\" alt=\"kudos\">
            <li class=\"reactionsText\">{{popular.kudos}}</li>
            <img class=\"reactionsVector\" src=\"assets/img/star.svg\" alt=\"star\">
        </ul>
    </div>                        
</div>

样式类 smallCard 如下所示：

.smallCard{   
    display: flex;
    flex-direction: column;
    min-height:0;
    margin: 0 20px 20px 0 ;
    max-width: 310px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    background: #FFFFFF;
}

我有一个这样的元素数组：

 export const populars = [ {
  id: 1,
  title: \'How To Add Confidence Intervals to Any Model\',
  caption: \'I would like to add another technique to your toolkit — confidence intervals\',
  kudos: 147,
  imageUser: \'assets/img/folkman.png\',
  nameUser: \'Tyler Folkman\',
  imageArticle: \'assets/img/Image.png\',
},
{
  id: 2,
  title: \'What’s New in JavaScript — ES2019\',
  kudos: 120,
  imageUser: \'assets/img/folkman.png\',
  nameUser: \'Tyler Folkman\',
  imageArticle: \'assets/img/ImageSmall2.png\',
},
{
  id: 3,
  title: \'How To Fake Being a Good Programmer\',
  kudos: 89,
  imageUser: \'assets/img/folkman.png\',
  nameUser: \'Tyler Folkman\',
  imageArticle: \'assets/img/ImageSmall3.png\',
},
{
  id: 4,
  title: \'Reduce Memory Usage and Make Your Python Code Faster Using Generators\',
  kudos: 21,
  imageUser: \'assets/img/folkman.png\',
  nameUser: \'Tyler Folkman\',
  imageArticle: \'assets/img/ImageSmall4.png\',
},
{
  id: 5,
  title: \'Here Are 11 Console Commands Every Developer Should Know\',
  kudos: 3,
  imageUser: \'assets/img/folkman.png\',
  nameUser: \'Tyler Folkman\',
  imageArticle: \'assets/img/ImageSmall5.png\',
}
]

我想遍历这个数组并在 540px 长的 div 中填充输出一个元素，在 260px 长的 div 中填充其余元素。如何正确使用 *ngFor 指令？图片上的布局。

标签： javascript html css angular angular-ng-if

【解决方案1】：

你可以使用*ngFor指令的first模板变量

*ngFor="let popular of populars; let first = first;"

然后使用ngClass 有条件地申请课程。

[ngClass]="{'big-card': first}"

【讨论】：