Таблица угловых данных и таблица угловых материалов

Question

Я использую Angular 6

Я хотел бы сделать таблицу, в которой используется удобная для пользователя сторона углового материала и согласованность угловых данных (и вообще данных).

Работает нормально, но я бы хотел добавить поиск по отдельным столбцам, как указано в таблицах данных. Проблема в том, что я не определил структуру данных, например, angular-datatbale (с вызовом ajax), и поэтому я не могу использовать их путь: https://l -lin.github.io / angular-datatables / # / advanced / индивидуальные колонки фильтрации

Вот как я это сделал:

Мой файл TS:

    initDataTable() {
    console.log('initDataTables');
    const that = this;
    this.dtOptions = {
        pagingType: 'full_numbers',
        // pageLength: 2,
        serverSide: false, // si true, execute l'appel ajax à chaque utilisation d'un des filtres
        processing: true,
        deferRender: true,
        lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'Tous']],
        responsive: true,
        language: {
            lengthMenu: 'Afficher _MENU_ enregistrements par page',
            zeroRecords: 'Aucun contact disponible',
            info: '_START_ à _END_ sur un total de _TOTAL_ enregistrements',
            // info: ' Page _PAGE_ sur _PAGES_',
            infoEmpty: 'Aucun contact disponible',
            infoFiltered: '(filtré(s) sur _MAX_ enregistrements)',
            paginate: {
                first:      'Premier',
                last:       'dernier',
                next:       'Suivant',
                previous:   'Precedent'
            },
            search: '_INPUT_',
            searchPlaceholder: 'Recherche',

        },
        order: [[1, 'desc']],
        // Declare the use of the extension in the dom parameter
        dom: 'Blfrtip',
        stateSave: true,
        buttons: [
            // 'columnsToggle',
            // 'colvis',
            // 'copy',
            {
                extend: 'print',
                className: 'btn btn-info btn-round btn-fab btn-fab-mini',
                text: '<i class="material-icons" title="Imprimer">print</i>',
                exportOptions: {
                    columns: [1, 2, 3, 4]
                }
            },
            {
                extend: 'pdfHtml5',
                className: 'btn btn-danger btn-round btn-fab btn-fab-mini',
                text: '<i class="material-icons" title="Exporter au format pdf">save</i>',
                exportOptions: {
                    columns: [1, 2, 3, 4]
                }
            },
            {
                extend: 'excel',
                className: 'btn btn-success btn-round btn-fab btn-fab-mini',
                text: '<i class="material-icons" title="Exporter au format xls">save</i>',
                exportOptions: {
                    columns: [1, 2, 3, 4]
                }
            },
            {
                text: '<i class="material-icons" title="Supprimer">delete</i>',
                className: 'btn btn-danger btn-round btn-fab btn-fab-mini',
                action: function (e, dt, node, config) {
                    that.checkSelect(dt);
                }
            },
            {
                text: '<i class="material-icons" title="Actualiser">replay</i>',
                className: 'btn btn-primary btn-round btn-fab btn-fab-mini',
                action: function (e, dt, node, config) {
                    that.refresh();
                }
            },
            {
                text: '<i class="material-icons" title="Nouveau">add</i>',
                className: 'btn btn-warning btn-round btn-fab btn-fab-mini',
                action: function (e, dt, node, config) {
                    that.crudContact(null, 1);
                }
            }
        ]
    };
}

Загрузка данных:

getContacts() {
    const dtr: Contact[] = [];
    this.myJarviaServices.getAllContacts()
        .pipe(first())
        .subscribe(res => {
                this.contacts = res.content;
                console.log(res.content);
                this.contacts.forEach((item, index) => {
                    // dtr[index] = [];
                    dtr.push(item);
                });
                this.dataTable = {
                    headerRow: ['N°', 'Identifiant', 'Nom', 'Prénom'],
                    footerRow: ['N°', 'Identifiant', 'Nom', 'Prénom'],
                    dataRows: dtr
                };
                this.contactList = res.content;
                this.loading = false;
            },
            error => {
                console.log('error subscribe: ' + error);
                this.error(error);
            });
}

Модель DataTable:

import {Contact} from './contact';

export interface DataTable {
headerRow: string[];
footerRow: string[];
dataRows: Contact[];

} * * тысяча двадцать-один

Мой HTML-файл:

<table id="example" datatable [dtOptions]="dtOptions" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
        <thead>
             <tr>
             <th style="width: 1%">
                <mat-checkbox (change)="$event ? masterToggle(dataTable.dataRows) : null"
                                                      [checked]="selection.hasValue() && isAllSelected(dataTable.dataRows.length)">
                </mat-checkbox>
             </th>
             <th>{{ dataTable.headerRow[0] }}</th>
             <th>{{ dataTable.headerRow[1] }}</th>
             <th>{{ dataTable.headerRow[2] }}</th>
             <th>{{ dataTable.headerRow[3] }}</th>
             <th class="disabled-sorting text-right">Action</th>
            </tr>
       </thead>
       <tfoot>
         <tr>
           <th>Sélection</th>
           <th>{{ dataTable.footerRow[0] }}</th>
           <th>{{ dataTable.footerRow[1] }}</th>
           <th>{{ dataTable.footerRow[2] }}</th>
           <th>{{ dataTable.footerRow[3] }}</th>
           <th class="text-right">Action</th>
         </tr>
       </tfoot>
       <tbody>
            <tr *ngFor="let row of dataTable.dataRows">
                 <td>
                     <mat-checkbox (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                                                 [checked]="selection.isSelected(row)">
                     </mat-checkbox>
                 </td>
                <!--<td>{{row[0]}}</td>-->
                <td>{{row.idaicontact}}</td>
                <td>{{row.identifiant}}</td>
                <td>{{row.nom}}</td>
                <td>{{row.prenom}}</td>
                <td class="text-right">
                    <a (click)="crudContact(row, 2)" class="btn btn-link btn-success btn-just-icon"  matTooltip="Mettre à jour" [matTooltipPosition]="'left'">
                        <i class="material-icons">create</i>
                    </a>
                    <a (click)="crudContact(row, 4)" class="btn btn-link btn-danger btn-just-icon"  matTooltip="Supprimer" [matTooltipPosition]="'right'">
                      <i class="material-icons">delete</i>
                    </a>
                   <a (click)="crudContact(row, 5)" class="btn btn-link btn-info btn-just-icon"  matTooltip="Visualiser" [matTooltipPosition]="'left'">
                   <i class="material-icons">visibility</i>
                   </a>
                </td>
             </tr>
        </tbody>
    </table>

Я нашел этот угловой материал: https://stackblitz.com/edit/angular-hbakxo-xctfqy?file=app%2Ftable-filtering-example.ts

но я не знаю, как адаптировать его к моему «гибридному» столу ...

Возможно ли применить фильтрацию отдельных столбцов?