Html 如何在angular中每3列后添加行

我想做的是在每3列div之后添加一行div

示例输出需求：

<div class="row">
     <div class="col-md-6"></div>
     <div class="col-md-6"></div>
     <div class="col-md-6"></div>
</div>

我有一系列这样的产品

<div class="row" *ngFor="let p of relatedProperties;let i = index">
    <div class="col-md-6"  *ngIf="relatedProperties[i].title !== undefined">{{ relatedProperties[i].title }}</div>
    <div class="col-md-6" *ngIf="relatedProperties[i].title !== undefined">{{ relatedProperties[i].title }}</div>
    <div class="col-md-6" *ngIf="relatedProperties[i].title !== undefined">{{ relatedProperties[i].title }}</div>
  </div>

{{relatedProperties[i].title}
{{relatedProperties[i].title}
{{relatedProperties[i].title}

但问题是，我的每一行在一次过滤上打印相同的标题，在下一次过滤上打印第二个标题

电流输出

<div class="row">
     <div class="col-md-6">Title1</div>
     <div class="col-md-6">Title1</div>
     <div class="col-md-6">Title1</div>
</div>

<div class="row">
         <div class="col-md-6">Title2</div>
         <div class="col-md-6">Title2</div>
         <div class="col-md-6">Title2</div>
</div>

<div class="row">
             <div class="col-md-6">Title3</div>
             <div class="col-md-6">Title3</div>
             <div class="col-md-6">Title3</div>
</div>

标题1
标题1
标题1
标题2
标题2
标题2
标题3
标题3
标题3

期望输出

<div class="row">
         <div class="col-md-6">Title1</div>
         <div class="col-md-6">Title2</div>
         <div class="col-md-6">Title3</div>
    </div>

    <div class="row">
             <div class="col-md-6">Title4</div>
             <div class="col-md-6">Title5</div>
             <div class="col-md-6">Title6</div>
    </div>

    <div class="row">
                 <div class="col-md-6">Title7</div>
                 <div class="col-md-6">Title8</div>
                 <div class="col-md-6">Title9</div>
    </div>

标题1
标题2
标题3
标题4
标题5
标题6
标题7
标题8
标题9

也许这样行得通，但我不确定

<ng-container *ngFor="let p of relatedProperties; let i = index">
   <div class="row" *ngIf="(i + 1) / 3 === 1">
      <div class="col-md-6"  *ngIf="relatedProperties[i - 2].title != null">{{ relatedProperties[i].title }}</div>
      <div class="col-md-6"  *ngIf="relatedProperties[i - 1].title != null">{{ relatedProperties[i].title }}</div>
      <div class="col-md-6"  *ngIf="relatedProperties[i].title != null">{{ relatedProperties[i].title }}</div>
   </div>
</ng-container>

---

最后，我建议您避免调用变量“p”，这是一种不好的做法。

如果您将数组拆分为始终有3个滴度的子数组，那么您可以在模板中轻松循环该数组

组件html

{{col.title}}

组件ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  titleArr = [
    { title: 'title1' },
    { title: 'title2' },
    { title: 'title3' },
    { title: 'title4' },
    { title: 'title5' },
    { title: 'title6' },
    { title: 'title7' },
    { title: 'title8' },
    { title: 'title9' },
    { title: 'title10' },
    { title: 'title11' },
    { title: 'title12' },
    { title: 'title13' },
  ];

  newTitleArr:any[];

  ngOnInit() {
     this.newTitleArr = this.splitArr(this.titleArr, 3)
  }

  splitArr(arr, size) {
     let newArr = [];
     for(let i = 0; i< arr.length; i += size) {
       newArr.push(arr.slice(i, i+size));
     }
     return newArr;
  }
}

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
标题器=[
{标题：'标题1'}，
{标题：'标题2'}，
{标题：'标题3'}，
{标题：'标题4'}，
{标题：'标题5'}，
{标题：'标题6'}，
{标题：'标题7'}，
{标题：'标题8'}，
{标题：'标题9'}，
{标题：'标题10'}，
{标题：'标题11'}，
{标题：'标题12'}，
{标题：'标题13'}，
];
新标题：任何[]；
恩戈尼尼特（）{
this.newtitlerar=this.splitArr（this.titlear，3）
}
拆分阵列（阵列，大小）{
设newArr=[]；
对于（设i=0；i

您可以使用此选项在每3列之后添加一行

<ng-container *ngFor="let p of relatedProperties; let i = index">
  <div class="row" *ngIf="(i%3)==0"> 
    <div class="col-md-6"  *ngFor="let p of relatedProperties.slice(i, i+3)>
       <span *ngIf="relatedProperties[i].title !== undefined"> {{ relatedProperties[i].title }} </span>
     </div>
   </div>    
</ng-container>

这假设div在显示之前至少有3个元素。你应该只显示只有2个元素的div吗？我在数组中总共有15个标题，那么它应该至少打印行div 5次，但它唯一打印1个timerelatedProperties的是我的数组@Francisco Santorelli我认为这是一个更好的方法，只是创建自定义拆分数组
<ng-container *ngFor="let p of relatedProperties; let i = index">
  <div class="row" *ngIf="(i%3)==0"> 
    <div class="col-md-6"  *ngFor="let p of relatedProperties.slice(i, i+3)>
       <span *ngIf="relatedProperties[i].title !== undefined"> {{ relatedProperties[i].title }} </span>
     </div>
   </div>    
</ng-container>