如何使用*ngFor通过Tailwind Css遍历表格中的2列？

Question

我正在尝试创建一个表，并在Angular中使用*ngFor循环填充这些块。这是将其显示为列表的原始代码：

<ul class="m-2 lg:m-8 pl-8">
          <li *ngFor="let c of otherClasses">
            <menu-link
              [entry]="{
                url: c.external_url,
                site: 'oasis',
                path: ['class', c.slug]
              }"
              >{{ c.title }}</menu-link
            >
          </li>
          <li>
            <a target="_blank" href="https://expium.com/"
              >Atlassian training, offered by our sister company Expium</a
            >
          </li>
        </ul>

这是一个不太好的解决方案，我一直在尝试：

          <thead>
            <tr>
              <th class="w-1/2">Col 1</th>
              <th class="w-1/2">Col 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td *ngFor="let c of otherClasses">{{ c.title }}</td>
            </tr>
          </tbody>
        </table>

我不确定我是否完全错过了目标，或者我只是需要把循环放在一个更好的地方。This is what I want the table to eventually look like.

Answer 1

   <thead>
        <tr>
          <th class="w-1/2">Col 1</th>
          <th class="w-1/2">Col 2</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let c of otherClasses;let i = index; let even = even">
          <ng-container *ngIf="even">
              <td>{{otherClasses[i].title}}</td>
              <td>{{otherClasses[i+1].title}}</td>
          </ng-container>
        </tr>
      </tbody>
    </table>

这应该会按照您的需要显示您的表。通过使用let even，我们可以每行显示两个otherClasses元素。

https://blog.angular-university.io/angular-2-ngfor/