在 ngFor 中动态添加 div 容器？

Question

我想使用 MDBootstrap 实现 this html 页面。

在我的 .ts 文件中我有三个 Courses.

var c1 = Builder(Course).id(1).autor("ASFASF").build();
var c2 = Builder(Course).id(1).autor("ASFASF").build();
var c3 = Builder(Course).id(1).autor("ASFASF").build();
this.courses.push(c1); this.courses.push(c2); this.courses.push(c3);

在 html 我正在尝试做这样的事情：

  <ng-container *ngFor="let course of courses; let i = index" >
      <ng-container *ngIf="i === 0 || (i+1) % 3 === 0">
        <div class="row text-center">
      </ng-container>
    
      <div class="col-lg-4 col-md-12 mb-4">
          
        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
          <img src="https://i.imgur.com/IfoRpDP.png" class="img-fluid" alt="Sample project image">
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
        </div>
    
        <mdb-card-body class="mt-3">
          <h4>
            <strong>Title of the news</strong>
          </h4>
          <p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
            eveniet
            ut et voluptates repudiandae.
          </p>
          <a mdbBtn color="indigo" size="sm" class="waves-light" mdbWavesEffect>
            <mdb-icon far icon="clone" class="left"></mdb-icon> View project</a>
        </mdb-card-body>
    
      </div>
    
      <ng-container *ngIf="i === 0 || (i+1) % 3 === 0">
        </div>
      </ng-container>
</ng-container>

我想做的是，对于第 0 个和每第三个项目，我想添加 <div class="row text-center"></div> 但所有其他项目必须在 row 容器内，因为它可以在link 我提供了。正如预期的那样，这无法编译。有什么想法吗？

Answer 1

也许尝试分块数据？资料来源：https://ourcodeworld.com/articles/read/278/how-to-split-an-array-into-chunks-of-the-same-size-easily-in-javascript

它可能看起来像这样：

TS

coursesToDisplay: any[];

constructor() {}

ngOnInit() {
    // ...
    this.coursesToDisplay = chunkArray(this.courses, 3);
}

chunkArray(myArray, chunk_size){
    var index = 0;
    var arrayLength = myArray.length;
    var tempArray = [];
    
    for (index = 0; index < arrayLength; index += chunk_size) {
        myChunk = myArray.slice(index, index+chunk_size);
        // Do something if you want with the group
        tempArray.push(myChunk);
    }

    return tempArray;
}

HTML

<div class="row text-center" *ngFor="let threeCourses of coursesToDisplay">
    <div class="col-lg-4 col-md-12 mb-4" *ngFor="let course of threeCourses">
        // ...content
    </div>
</div>

在 ngFor 中动态添加 div 容器？

Dynamically add div container inside ngFor?

html

twitter-bootstrap

angular-ui-bootstrap

angular

mdbootstrap