Angular 2 Bind только 3 флажка в каждом ряду динамически - PullRequest
Новая
       28

Angular 2 Bind только 3 флажка в каждом ряду динамически

0 голосов
/ 19 января 2019

Я привязываю флажки динамически, но независимо от количества флажков, мне нужно отображать только 3 флажка в каждой строке. Как мне этого добиться? Не только флажки, как мы можем отображать только 3 динамических данных из многих в каждой строке в Angular?

Примечание. Данные будут динамическими. 

<table>
  <ng-container *ngFor="let aar of appAccessRights">
    <tr>
      <td>
        <ul>
          <li *ngFor="let item of aar.applicationPermissions">
            <input type="checkbox" id="AppPermissions{{item.id}}" class="k-checkbox" name="AppPermissions{{item.id}}">
            <label class="k-checkbox-label" for="AppPermissions{{item.id}}">{{item.permissions}}</label>
          </li>
        </ul>
      </td>
    </tr>
  </ng-container>
</table>

1 Ответ

0 голосов
/ 19 января 2019

Самый простой способ, о котором я знаю, - это использовать библиотека Flex-layout Angular . Благодаря этому у вас есть несколько вариантов создания строк с переносом строк или сеток с определенной шириной. Вики - это еще одна хорошая прямая ссылка на дополнительную информацию по этому вопросу.

Варианты wrap описаны более здесь .

Примером псевдо-выхода может быть: 

<div fxLayout="row wrap">
    <ng-container *ngFor="let item of aar.applicationPermissions">
        <div fxFlex="33.3">
            <input type="checkbox" id="AppPermissions{{item.id}}" class="k-checkbox" name="AppPermissions{{item.id}}">
            <label class="k-checkbox-label" for="AppPermissions{{item.id}}">{{item.permissions}}</label>
        </div>
    </ng-container>
</div>
...