如何使用 *ngFor 循环使用 Tailwind Css 的表中的 2 列？答案

【问题标题】：How to use *ngFor to loop through 2 columns in a table using Tailwind Css?如何使用 *ngFor 循环使用 Tailwind Css 的表中的 2 列？
【发布时间】：2022-01-07 07:51:03
【问题描述】：

我正在尝试创建一个表格并在 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.

【问题讨论】：

需要使用表吗？试试Grid，会轻松很多。

标签： angular for-loop tailwind-css ngfor

【解决方案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/

【讨论】：