показать массив разбитый на разрывы строк в основной таблице - PullRequest
Новая
       22

показать массив разбитый на разрывы строк в основной таблице

0 голосов
/ 16 мая 2019

Я использую Angular 7 с primeng

В одной из моих таблиц primeng я получаю один из столбцов таблицы как массив 

permissions: ["api-search-miscellaneous", "api-show-miscellaneous", "api-updatestatus-miscellaneous",…]
0: "api-search-miscellaneous"
1: "api-show-miscellaneous"
2: "api-updatestatus-miscellaneous"
3: "api-delete-miscellaneous"
4: "api-add-miscellaneous"
5: "api-showall-miscellaneous"
6: "api-update-miscellaneous"

Теперь primeng показывает этот столбец с разделенной запятойКак я могу показать, что элементы массива один за другим в другой строке только в одной строке.

Это мои столбцы, здесь разрешение в форме массива, который я показываю в виде группы на моей веб-странице .ts file code 

 this.cols = [
            {
                field: 'name',
                header: this.getLocalTranslation(
                    'Features.gridLabel.featureGroup',
                ),
            },
            {
                field: 'permissions',
                header: this.getLocalTranslation(
                    'Features.gridLabel.functionalities',
                ),
            },
        ];

.html file code 

<ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns">
                    {{ rowData[col.field] }}
                </td>
            </tr>
        </ng-template>

enter image description here

1 Ответ

0 голосов
/ 16 мая 2019

Я получил решение для своей проблемы

Я изменил свой .ts-код на этот, я использовал Angular Slice pipe и прошел через массив. 

    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns">
                <div
                    *ngIf="
                        col.field == 'permissions';
                        then content;
                        else other_content
                    "
                ></div>
                <ng-template #content>
                    <li *ngFor="let i of rowData[col.field] | slice: 0:i">
                        {{ i }}
                    </li></ng-template
                >
                <ng-template #other_content>{{
                    rowData[col.field]
                }}</ng-template>
            </td>
        </tr>
    </ng-template>
...