Показать шаблон в l oop, если значение соответствует свойству шаблона

Question

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

Итак, я видел, как это реализовано следующим образом:

• model - это данные, относящиеся к таблице (заголовки, строки, pagination, et c.)
• matches - имя столбца для сопоставления (в идентификаторе заголовков - что совпадает, в строках - это ключ свойства).
• let-content - это данные, связанные с ячейкой для этой строки.

<ui-table [model]="tableModel">
  <ng-template matches="columnA" let-content="content">
    {{content | commaSeparate}}
  </ng-template>
</ui-table>

public tableModel = {
  headers: [
    { title: 'Column A', id: 'columnA' },
    { title: 'Column B', id: 'columnB' }
  ],
  rows: [
    { columnA: ['A', 'B'], columnB: 'Column B' },
    { columnA: ['C', 'D'], columnB: 'Column B2' }
  ]
}

В моем ui-table компоненте у меня есть следующее тело таблицы:

<tbody #tBody class="uitk-c-table__body">
  <tr *ngFor="let row of rowItems" class="uitk-c-table__row">
    <!-- If "matches === model.headers[x].id" show the custom cell -->
    <td *ngFor="let cell of model.headers; index as c">{{row[model.headers[c].id] || ''}}</td>
  </tr>
</tbody>

What I не уверен, как мне показать пользовательскую ячейку ng-template, если matches === model.headers[x].id?

Answer 1

Я смог понять это. Сначала я создаю директиву, которая содержит свойство match, которое является столбцом, по которому я хочу сопоставить, и свойство tableCell, которое является шаблоном в директиве.

@Directive({ selector: 'ui-table-cell' })
export class TableCellDirective {
  @Input() public match: string = '';
  @ContentChild('tableCell', { static: false }) public tableCell!: any;
}

Затем, когда таблица загружается Я загружаю все шаблоны в объект, где ключом является идентификатор ячейки, а значением - шаблон. Итак, я показываю шаблон. Если нет, я показываю исходные данные.

<tr *ngFor="let row of rowItems" class="uitk-c-table__row">
  <td *ngFor="let cell of model.headers">
    <ng-container *ngIf="columnMeta[cell.id] && columnMeta[cell.id].tableCell" [ngTemplateOutlet]="columnMeta[cell.id].tableCell" [ngTemplateOutletContext]="{content: row[cell.id]}"></ng-container>
    <ng-container *ngIf="!columnMeta[cell.id]">{{row[cell.id] || ''}}</ng-container>
  </td>
</tr>

Наконец, чтобы использовать его, я просто делаю следующее:

<ui-table *ngIf="tableDataModel.rows?.length>0" [model]="tableDataModel" (onRequestEdit)="onOpenEdit($event)">
  <ui-table-cell match="permissions">
    <ng-template #tableCell let-content="content">
      {{content|arrayToList}}
    </ng-template>
  </ui-table-cell>
</ui-table>

Answer 2

Внутри компонента ui-table давайте определим свойство input:

@Input() passedTemplate: TemplateRef<any>;
@Input() displayContent: any // to display variable inside ng-template

И определим свойство input, чтобы передать ваш ng-шаблон в Like this:

  <ui-table [model]="tableModel" [passedTemplate]='template' [displayContent]='content'>
  </ui-table>
   <ng-template #template matches="columnA" let-content="content">
    {{content | commaSeparate}}
  </ng-template>

Затем попробуйте использовать ng-container в вашей ui-таблице html файл:

<ng-container *ngIf="matches === model.headers[x].id"
                          [ngTemplateOutlet]="passedTemplate"
                          [ngTemplateOutletContext]="{content: displayContent}">
</ng-container>

Надеюсь на эту помощь ...