Угловой динамический рендеринг шаблона, такой как шаблон ячейки пользовательского интерфейса

Рендеринг Angular (7) динамического шаблона (ng-template) как шаблон ячейки пользовательского интерфейса (шаблон объявлен в colDefs родительского элемента); Я пробовал так много раз, так как более 30 дней смотрел видео, статьи по рендерингу ng-шаблонов, но не смог найти никакого решения, пожалуйста, помогите мне здесь.

Заранее спасибо:)

app.component.ts

export class AppComponent implements OnInit {
name = 'Angular';
gridOptions:any;

constructor(private http: HttpClient){}


ngOnInit(){

  this.gridOptions = {
    colDefs:[
     {name:'id', displayName:'ID',width:80},
     {name:'name', displayName:'Name'},
     {name:'username', displayName:'Username', cellTemplate:'Static text from template'},
     {name:'email', displayName:'Email', cellTemplate:'{{row[col.name]}}'},  // i tried like this
     {name:'phone', displayName:'phone', cellTemplate:"<strong style='color:blue'> + row[col.name] + </strong>"}, // I need to achive this kind of template like ui grid for angularjs
     {name:'website', displayName:'website', cellTemplate:'row[col.name]'}, // i tried like this also
    ]
   }

   this.http.get("https://jsonplaceholder.typicode.com/users").subscribe((res) =>{
    this.gridOptions.data = res;
  });

 }

}

данных-table.component.ts

export class DataTableComponent implements OnInit {
@Input() gridOptions: any = [];
  constructor() { } 

  ngOnInit() {}
}

данное table.component.html

<table>
    <tr>
        <th *ngFor="let col of gridOptions.colDefs">{{col.name}}</th>
    </tr>

    <tr *ngFor="let row of gridOptions.data ;let i = index">
        <td *ngFor="let col of gridOptions.colDefs">
            <ng-container *ngIf="!col.cellTemplate else myTemplate" [ngTemplateOutlet]="myTemplate">
                {{row[col.name]}}
            </ng-container>
            <ng-template #myTemplate row="row" col="col">
                {{col.cellTemplate}}
            </ng-template>

            <!-- <ng-template #myTemplate row="row" col="col" innerHTML="col.cellTemplate}"></ng-template> -->
        </td>
    </tr>
</table>

app.component.html

<app-data-table [gridOptions]="gridOptions"></app-data-table>

занятый кот

StackBlitz DEMO

Источник

2 ответа

Решение

Посмотрите демонстрацию StackBlitz, которую я создал для вас. Это использовать функцию рендера cellFn в котором вы можете настроить шаблон по своему усмотрению. Также обратите внимание на использование safeHtml труба для рендеринга HTML внутри шаблона.

РЕДАКТИРОВАТЬ: Как OP заявил в комментариях, он также хочет использовать угловые директивы и т. Д. В шаблоне. Так что вот демонстрация StackBlitz для этой цели.

Источник

Насколько я знаю, DataTables не поддерживает магию Angular. Я справился с подобными проблемами с функциями рендеринга, которые предлагает вам DataTables: https://datatables.net/reference/option/columns.render

Например, вам нужно изменить строку:

{name:'email', displayName:'Email', cellTemplate:'{{row[col.name]}}'},

чтобы:

{name:'email', displayName:'Email', render:(data, type, row, meta) => 'contact ' + row.name + ' via E-Mail'},

Надеюсь, это поможет.

Источник
Другие вопросы по тегам