Блог

Я пытаюсь создать таблицу и заполнить блоки циклом *ngFor в Angular. Это исходный код, который просто отображает его в виде списка:

 <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>
 

Я не уверен, что я полностью пропустил отметку, или мне просто нужно поместить цикл в лучшее место.
Это то, как я хочу, чтобы в конечном итоге выглядела таблица.

    <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, мы можем отображать два элемента других классов в строке.

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