Nano Hash - криптовалюты, майнинг, программирование

Таблица Angular Data с сортировкой, нумерацией страниц и фильтрацией

файл ts

 import { Component, OnInit, ViewChild } from '@angular/core';
    import { MatPaginator } from '@angular/material/paginator';
    import { MatSort } from '@angular/material/sort';
    import { MatTableDataSource } from '@angular/material/table';
    import { PersonalDB } from '../personal-db';
    import { Personal } from '../personal';


    @Component({
      selector: 'app-student-table',
      templateUrl: './student-table.component.html',
      styleUrls: ['./student-table.component.css']
    })
    export class StudentTableComponent implements OnInit {

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



      constructor() {

      }

      personal: Personal[] = [
        {
          dates: "2018.2.3",
          image: "../../assets/img/a.jpg",
          id: "1",
          name: "Nadun",
          email: "[email protected]",
          mobile: "0778012319",
        }, {
          dates: "2018.2.13",
          image: "../../assets/img/b.jpg",
          id: "2",
          name: "kmale",
          email: "[email protected]",
          mobile: "0778012319",
        }, {
          dates: "2018.2.23",
          image: "../../assets/img/c.jpg",
          id: "3",
          name: "sunil",
          email: "[email protected]",
          mobile: "0778012319",
        },
        {
          dates: "2018.2.1",
          image: "../../assets/img/d.jpg",
          id: "4",
          name: "Nipun",
          email: "[email protected]",
          mobile: "0778012319",
        },
        {
          dates: "2018.2.6",
          image: "../../assets/img/e.jpg",
          id: "5",
          name: "Kavinga",
          email: "[email protected]",
          mobile: "0778012319",
        },
        {
          dates: "2018.2.14",
          image: "../../assets/img/f.jpg",
          id: "6",
          name: "Ishara",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.25",
          image: "../../assets/img/g.jpg",
          id: "7",
          name: "Dilshan",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.19",
          image: "../../assets/img/h.jpg",
          id: "8",
          name: "Ruvini",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.7",
          image: "../../assets/img/i.jpg",
          id: "9",
          name: "Saduni",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.10",
          image: "../../assets/img/j.jpg",
          id: "10",
          name: "Himaya",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.19",
          image: "../../assets/img/k.jpg",
          id: "11",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.18",
          image: "../../assets/img/l.jpg",
          id: "12",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.19",
          image: "../../assets/img/m.jpg",
          id: "13",
          name: "string",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.28",
          image: "../../assets/img/n.jpg",
          id: "14",
          name: "string",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.17",
          image: "../../assets/img/o.jpg",
          id: "15",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.21",
          image: "../../assets/img/p.jpg",
          id: "16",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.11",
          image: "../../assets/img/a.jpg",
          id: "17",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.22",
          image: "../../assets/img/q.jpg",
          id: "18",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.19",
          image: "../../assets/img/r.jpg",
          id: "19",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.13",
          image: "../../assets/img/s.jpg",
          id: "20",
          name: "string",
          email: "string",
          mobile: "string",
        }

      ];
      displayedColumns = ['dates', 'image', 'id', 'name', 'email', 'mobile'];
      dataSource = new MatTableDataSource(this.personal);

      ngOnInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataSource.data = this.personal;
        console.log(this.personal);
        console.log(this.dataSource);
      }

      applyFilter(filterValue: string) {
        filterValue = filterValue.trim();
        filterValue = filterValue.toLowerCase();
        this.dataSource.filter = filterValue;
      }

      rowClicked(row: any): void {
        console.log(row);
      }

    }

html-страница

<mat-form-field>
  <br>
  <small>Search:</small>
  <input matInput (keyup)="applyFilter($event.target.value)">
  <mat-divider style="color: darkgrey"></mat-divider>
</mat-form-field>
<br>
<br>
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

    <!-- 1 -->
    <ng-container matColumnDef="dates">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> dates </th>
      <td mat-cell *matCellDef="let row"> {{row.dates}} </td>
    </ng-container>

    <!-- 2 -->
    <ng-container matColumnDef="image">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> image </th>
        <td mat-cell *matCellDef="let row"> <img src="{{row.image}}" style="width: 50px; height: 50;"></td>
      </ng-container>

    <!-- 3 -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> id </th>
      <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>

    <!-- 4 -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> name </th>
      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
    </ng-container>

    <!-- ID 5 -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> email </th>
      <td mat-cell *matCellDef="let row"> {{row.email}} </td>
    </ng-container>

    <!-- 6 -->
    <ng-container matColumnDef="mobile">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> mobile </th>
      <td mat-cell *matCellDef="let row"> <img src="" style="width: 50px; height: 50;">{{row.mobile}}</td>
    </ng-container>

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

  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

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

введите здесь описание ссылки

angular angular-material
21.09.2019

Ответы:


1

Когда я работал с таблицей Angular Data с сортировкой, разбивкой на страницы и фильтрацией, у меня была проблема, что ни сортировка, ни разбиение на страницы не работали, когда они находились в цикле ngOnInit(), и это произошло потому, что во время выполнения ngOnInit() они еще не были доступны . Чтобы сортировка и пагинация заработали, рекомендую передать их в цикл ngAfterViewInit().

Это означает перемещение блока кода, который у вас есть в ngOnInit(), в:

ngAfterViewInit(){
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.dataSource.data = this.personal;
    console.log(this.personal);
    console.log(this.dataSource);
}

Это даст вам лучший результат.

21.09.2019

2 
<!-- normal data -->
<br>
<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<br>
<br>
<div class="example-container mat-elevation-z8">

  <mat-table *ngIf="dataSource != null" [dataSource]="dataSource" matSort>

    <!-- 1 -->
    <ng-container matColumnDef="joinDate">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Join Date </mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.joinDate}}</mat-cell>
    </ng-container>

    <!-- 2 -->
    <ng-container matColumnDef="image">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Image </mat-header-cell>
      <mat-cell *matCellDef="let row"><img src="{{row.image}}" style="width: 25px; height: 25;"></mat-cell>
    </ng-container>

    <!-- 3 -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
    </ng-container>

    <!-- 4 -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
    </ng-container>

    <!-- ID 5 -->
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
      <mat-cell  *matCellDef="let row">{{row.email}}</mat-cell>
    </ng-container>

    <!-- 6 -->
    <ng-container matColumnDef="mobile">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile </mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.mobile}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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


  </mat-table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

исправление - убраны все таблицы, теги tr и td

24.09.2019

3

API сортировки, ширины страницы:

sortData(sort: Sort) {
    if(sort.direction == "asc" || sort.direction == "desc") {
      this.order = [{order: sort.active, type: sort.direction}]
    } else {
      this.order = null;
    }
    ......
  }
  
  pageChangeEvent(event) {
    this.pageIndex = event.pageIndex + 1;
    this.pageSize = event.pageSize;
    ....
  }
<table class="table" mat-table matSort [dataSource]="dataSource" (matSortChange)="sortData($event)">
        

        <!-- Item Price Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> Name </th>
          <td mat-cell *matCellDef="let element">
            <a routerLink="/campaign/edit/{{pageTab}}/{{element.id}}" class="info_title">
              {{(element.name.length>40) ? (element.name | slice:0:40) + '...' : (element.name)}} 
              <span class="btn-draft" *ngIf="element.status == 'C'">Draft</span>
            </a>
            <a routerLink="/campaign/edit/{{pageTab}}/{{element.id}}" class="info_value">        {{element.categoryName}}</a>
          </td>
        </ng-container>  

        <!-- Item Code Column -->
        <ng-container matColumnDef="remainingQuantity">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="remainingQuantity"> Remaining quantity </th>
          <td mat-cell *matCellDef="let element"> {{element.remainingQuantity}} </td>
        </ng-container>
          
        <!-- Item Merchant Column -->
        <ng-container matColumnDef="redemption_end_date">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="redemption_end_date"> End time </th>
          <td mat-cell *matCellDef="let element"> {{element.redemptionEndDate}} </td>
        </ng-container>

        <!-- Item Edit Delete Column -->
        <ng-container matColumnDef="lastModifiedDate">
          <th mat-header-cell *matHeaderCellDef></th>
          <td class="last-edited" mat-cell *matCellDef="let element">last edited on {{element.lastModifiedDate}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
      <mat-paginator style="display: none;"></mat-paginator>
      <mat-paginator *ngIf="(listCoupon && listCoupon.length>0) || filterValue" style="margin-left: auto; border-top: 1px solid #E7E7E7;" 
        #paginator [length]="totalItems"
        [pageSize]="pageSize"
        [pageIndex]="(pageIndex - 1)"
        [pageSizeOptions]="[5, 10, 25, 50, 100]" showFirstLastButtons (page)="pageChangeEvent($event)">
      </mat-paginator>

24.09.2019
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..