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

Posted 2023-03-07

【中文标题】如何使用 *ngFor 循环使用 Tailwind Css 的表中的 2 列？

【英文标题】：How to use *ngFor to loop through 2 columns in a table using Tailwind Css?

【发布时间】：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，会轻松很多。

【参考方案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/