在ngFor中動態添加div容器？-有解無憂

我想使用 MDBootstrap實作這個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 ></div>，但所有其他專案必須在該row容器內，因為它可以在我提供的鏈接上看到。正如預期的那樣，這無法編譯。有任何想法嗎？

uj5u.com熱心網友回復：

也許嘗試分塊資料？來源：https ://ourcodeworld.com/articles/read/278/how-to-split-an-array-into-chunks-of-the-same-size-easily-in-javascript

它可能看起來像這樣：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/437808.html

標籤：html 有角度的推特引导角度-ui-bootstrap mdbootstrap

上一篇：Bootstrapbavbar僅1頁的額外空間錯誤

下一篇：如何從表中洗掉特定行？