Angular DataTable (таблица матов) не фильтруется и не сортируется после извлечения из AWS - PullRequest
Новая
       40

Angular DataTable (таблица матов) не фильтруется и не сортируется после извлечения из AWS

0 голосов
/ 07 марта 2020

Я пытаюсь использовать mat-table в проекте angular для отображения данных, извлеченных из AWS. Данные тянутся очень хорошо, и они заполняют таблицу, однако сортировка и фильтрация не работают. Когда я следовал руководству по материалу. angular .io сайт, он работает, но когда я изменяю его, чтобы извлечь данные из AWS, это не так. Любая помощь будет принята с благодарностью!

Вот мой код component.ts: 

import { HttpClient } from '@angular/common/http';
import { Component, OnInit, AfterViewInit, AfterViewChecked, Inject, ChangeDetectorRef, ViewChild } from '@angular/core';
import { TableData } from '../../md/md-table/md-table.component';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog' 
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { MessageService } from 'primeng/api';
import { WasteService } from '../waste/waste.services'
import { Wastes } from '../waste/wastes'
import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-bs4';
import 'bootstrap/dist/css/bootstrap.css';
import 'datatables.net-bs4/css/dataTables.bootstrap4.css';
import { Observable } from 'rxjs';

//declare const $: any;

export interface DialogData {
    enabled: number;
    wastename: string;
    ohdept: string;
    cadept: string;
    trgroup: string;
    bgroup: string;
    unid: string;
    psn: string;
    hazclass: string;
    pg: string;
    moe: string;
    ohio: number;
    trail: number;
}

export interface WasteData {
    enabled: number;
    wastename: string;
    ohdept: string;
    cadept: string;
    trgroup: string;
    bgroup: string;
    unid: string;
    psn: string;
    hazclass: string;
    pg: string;
    moe: string;
    ohio: number;
    trail: number;
    uid: string;
}

@Component({
    selector: 'app-waste-cmp',
    templateUrl: './waste.component.html',
})

export class WasteComponent implements OnInit, AfterViewInit, AfterViewChecked {

    checkBoxValue(value){

        if (value == 1) {
            return true;
        } else {
            return false;
        }
    }

    displayedColumns: string[] = ['enabled', 'wastename', 'ohdept', 'cadept', 'trgroup', 'bgroup', 'unid', 'psn', 'hazclass', 'pg', 'moe', 'ohio', 'trail', 'edit'];
    dataSource: any;

    @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    @ViewChild(MatSort, {static: true}) sort: MatSort;

    constructor(private http: HttpClient, private chRef: ChangeDetectorRef, public dialog: MatDialog, private wasteService: WasteService) {}

    ngOnInit() {

        this.wasteService.getAllWastes().subscribe(data => {

            this.chRef.detectChanges(); 

            this.dataSource = new MatTableDataSource(Object.values(data)[1]);
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;    
        });
    }

    applyFilter(event: Event) {

        const filterValue = (event.target as HTMLInputElement).value;
        console.log(filterValue);
        this.dataSource.filter = filterValue.trim().toLowerCase();
    }

    getWastes() {

    }

    ngAfterViewInit() {

    }

    ngAfterViewChecked() {

    }

    createDialog(): void {
        const dialogRef = this.dialog.open(DialogCreateWaste, {
            width: '500px',
            data: {enabled:1}
        });
    }

    updateDialog(uid, enabled, wastename, ohdept, cadept, trgroup, bgroup, unid, psn, hazclass, pg, moe, ohio, trail): void {
        const dialogRef = this.dialog.open(DialogCreateWaste, {
            width: '500px',
            data: {
                enabled: this.checkBoxValue(enabled),
                wastename: wastename,
                ohdept: ohdept,
                cadept: cadept,
                trgroup: trgroup,
                bgroup: bgroup,
                unid: unid,
                psn: psn,
                hazclass: hazclass,
                pg: pg,
                moe: moe,
                ohio: this.checkBoxValue(ohio),
                trail: this.checkBoxValue(trail),
                uid: uid
            }
        });
    }
}

@Component({
    selector: 'dialog-create-waste',
    templateUrl: 'dialog.create.waste.html',
    providers: [MessageService],
})
export class DialogCreateWaste {
    constructor(
        public dialogRef: MatDialogRef<DialogCreateWaste>,
        @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

    checkBoxValue(value){
        return value ? 1 : 0;
    }

    onClick(result) {
        this.dialogRef.close();
        //alert(JSON.stringify(result));
        if (result.bgroup == null || result.bgroup.length < 1) {
            result.bgroup = null;
        }

        if (result.unid == null || result.unid.length < 1) {
            result.unid = null;
        }

        if (result.psn == null || result.psn.length < 1) {
            result.psn = null;
        }

        if (result.hazclass == null || result.hazclass.length < 1) {
            result.hazclass = null;
        }

        if (result.pg == null || result.pg.length < 1) {
            result.pg = null;
        }

        if (result.moe == null || result.moe.length < 1) {
            result.moe = null;
        }

        if (result.uid == null) {
            //alert("insert");
            var insertPayload = { 
                "enabled": 1,
                "wastename": result.wastename,
                "ohdept": result.ohdept,
                "cadept": result.cadept,
                "trgroup": result.trgroup,
                "bgroup": result.bgroup,
                "unid": result.unid,
                "psn": result.psn,
                "hazclass": result.hazclass,
                "pg": result.pg,
                "moe": result.moe,
                "ohio": this.checkBoxValue(result.ohio),
                "trail": this.checkBoxValue(result.trail)
            }
            //alert(JSON.stringify(insertPayload));

            $.ajax({
                url: 'url',
                type: 'POST',
                crossDomain: true,
                contentType: 'application/json',
                data: JSON.stringify(insertPayload),
                dataType: 'json',
                success: function (data) {
                    //alert(JSON.stringify(data));
                    var x = document.getElementById("confirmation");
                    x.className = "show";
                    setTimeout(function(){x.className = x.className.replace("show", "");}, 3000);
                    location.reload();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Data did not save. Please submit a support request");
                }
            })
        } else {
            //alert("update");
            var updatePayload = { 
                "uid": result.uid,
                "enabled": this.checkBoxValue(result.enabled),
                "wastename": result.wastename,
                "ohdept": result.ohdept,
                "cadept": result.cadept,
                "trgroup": result.trgroup,
                "bgroup": result.bgroup,
                "unid": result.unid,
                "psn": result.psn,
                "hazclass": result.hazclass,
                "pg": result.pg,
                "moe": result.moe,
                "ohio": this.checkBoxValue(result.ohio),
                "trail": this.checkBoxValue(result.trail)
            }
            //alert(JSON.stringify(updatePayload));

            $.ajax({
                url: 'url',
                type: 'PUT',
                crossDomain: true,
                contentType: 'application/json',
                data: JSON.stringify(updatePayload),
                dataType: 'json',
                success: function (data) {
                    //alert(JSON.stringify(data));
                    var x = document.getElementById("confirmation");
                    x.className = "show";
                    setTimeout(function(){x.className = x.className.replace("show", "");}, 3000);
                    location.reload();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Data did not save. Please submit a support request");
                }
            })
        }
    }

    onNoClick(): void {
        this.dialogRef.close();
    }
}

И мой компонент. html

<style>
    #confirmation {
      visibility: hidden;
      min-width: 250px;
      margin-left: -125px;
      background-color: rgb(59, 214, 59);
      color: ghostwhite;
      text-align: center;
      border-radius: 2px;
      padding: 16px;
      position: fixed;
      z-index: 1;
      left: 50%;
      bottom: 30px;
      font-size: 17px;
    }

    #confirmation.show {
      visibility: visible;
      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    table {
      width: 100%;
    }

    @-webkit-keyframes fadein {
      from {bottom: 0; opacity: 0;} 
      to {bottom: 30px; opacity: 1;}
    }

    @keyframes fadein {
      from {bottom: 0; opacity: 0;}
      to {bottom: 30px; opacity: 1;}
    }

    @-webkit-keyframes fadeout {
      from {bottom: 30px; opacity: 1;} 
      to {bottom: 0; opacity: 0;}
    }

    @keyframes fadeout {
      from {bottom: 30px; opacity: 1;}
      to {bottom: 0; opacity: 0;}
    }
</style>
<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header card-header-icon card-header-danger">
            <div class="card-icon">
              <i class="material-icons">cached</i>
            </div>
              <h4 class="card-title ">Wastes</h4>
            </div>
            <div class="card-body">
              <mat-form-field>
              <mat-label>Filter</mat-label>
                <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Lead">
              </mat-form-field>

              <div class="mat-elevation-z8">
                <table mat-table [dataSource]="dataSource" matSort>

                <!-- Enabled Column -->
                <ng-container matColumnDef="enabled">
                  <th mat-header-cell *matHeaderCellDef> Enabled </th>
                  <td mat-cell *matCellDef="let element"> {{element.Enabled.N}} </td>
                </ng-container>

                <!-- Waste Name Column -->
                <ng-container matColumnDef="wastename">
                  <th mat-header-cell *matHeaderCellDef> Waste Name </th>
                  <td mat-cell *matCellDef="let element"> {{element.WasteName.S}} </td>
                </ng-container>

                <!-- OH Dept Column -->
                <ng-container matColumnDef="ohdept">
                  <th mat-header-cell *matHeaderCellDef> OH Dept </th>
                  <td mat-cell *matCellDef="let element"> {{element.OHDept.S}} </td>
                </ng-container>

                <!-- CA Dept Column -->
                <ng-container matColumnDef="cadept">
                  <th mat-header-cell *matHeaderCellDef> CA Dept </th>
                  <td mat-cell *matCellDef="let element"> {{element.CADept.S}} </td>
                </ng-container>

                <!-- Tracking Group Column -->
                <ng-container matColumnDef="trgroup">
                  <th mat-header-cell *matHeaderCellDef> TR Dept </th>
                  <td mat-cell *matCellDef="let element"> {{element.TRGroup.S}} </td>
                </ng-container>

                <!-- BGB Group Column -->
                <ng-container matColumnDef="bgroup">
                  <th mat-header-cell *matHeaderCellDef> BGB Group </th>
                  <td mat-cell *matCellDef="let element"> {{element.BGroup.S}} </td>
                </ng-container>

                <!-- UNID Column -->
                <ng-container matColumnDef="unid">
                  <th mat-header-cell *matHeaderCellDef> UNID </th>
                  <td mat-cell *matCellDef="let element"> {{element.UNID.S}} </td>
                </ng-container>

                <!-- PSN Column -->
                <ng-container matColumnDef="psn">
                  <th mat-header-cell *matHeaderCellDef> PSN </th>
                  <td mat-cell *matCellDef="let element"> {{element.PSN.S}} </td>
                </ng-container>

                <!-- HazClass Column -->
                <ng-container matColumnDef="hazclass">
                  <th mat-header-cell *matHeaderCellDef> Has Class </th>
                  <td mat-cell *matCellDef="let element"> {{element.HazClass.S}} </td>
                </ng-container>

                <!-- PG Column -->
                <ng-container matColumnDef="pg">
                  <th mat-header-cell *matHeaderCellDef> PG </th>
                  <td mat-cell *matCellDef="let element"> {{element.PG.S}} </td>
                </ng-container>

                <!-- MOE Column -->
                <ng-container matColumnDef="moe">
                  <th mat-header-cell *matHeaderCellDef> MOE </th>
                  <td mat-cell *matCellDef="let element"> {{element.MOE.S}} </td>
                </ng-container>

                <!-- Ohio Column -->
                <ng-container matColumnDef="ohio">
                  <th mat-header-cell *matHeaderCellDef> Ohio </th>
                  <td mat-cell *matCellDef="let element">
                    <i *ngIf="element.Ohio.N == 1" class="fa fa-check-circle" aria-hidden="true"></i>
                    <i *ngIf="element.Ohio.N == 0" class="fa fa-ban" aria-hidden="true"></i>
                  </td>
                </ng-container>

                <!-- Trail Column -->
                <ng-container matColumnDef="trail">
                  <th mat-header-cell *matHeaderCellDef> Trail </th>
                  <td mat-cell *matCellDef="let element">
                    <i *ngIf="element.Trail.N == 1" class="fa fa-check-circle" aria-hidden="true"></i>
                    <i *ngIf="element.Trail.N == 0" class="fa fa-ban" aria-hidden="true"></i>
                  </td>
                </ng-container>

                <!-- Edit Column -->
                <ng-container matColumnDef="edit">
                  <th mat-header-cell *matHeaderCellDef> Edit </th>
                  <td mat-cell class="td-actions" *matCellDef="let element"> 
                    <button mat-raised-button type="button" class="btn btn-success {{element.UID.S}}" (click)="updateDialog(element.UID.S,element.Enabled.N,element.WasteName.S,element.OHDept.S,element.CADept.S,element.TRGroup.S,element.BGroup.S,element.UNID.S,element.PSN.S,element.HazClass.S,element.PG.S,element.MOE.S,element.Ohio.N,element.Trail.N)">
                      <i class="material-icons">edit</i>
                    </button>
                  </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

                </table>
                <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
                <div style="padding-left: 10px; padding-bottom: 5px;">
                  <button mat-raised-button type="button" class="btn btn-info btn-round" (click)="createDialog()">Add Waste</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<div id="confirmation">Success!!!</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...