Угловой материал - Часть 4: Таблица данных

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Это четвертая часть серии Angular Material на CodingTheSmartWay.com. В этой части мы сосредоточимся на таблицах данных. Конечно, в этой части снова предполагается, что вы знакомы с библиотекой материалов Angular в целом и знаете, как настроить проект Angular и установить библиотеку материалов Angular в этом проекте. Если вы новичок в Angular Material, пожалуйста, сначала взгляните на первую часть этой серии: Angular Material - Part 1 Introduction или посетите веб-сайт Angular Material по адресу https://material.angular.io.

Если вы хотите узнать о Angular Material Dialogs, Tooltips и SnackBars, вам также следует изучить вторую часть. Для элементов навигации Angular Material (меню, боковая навигация и панели инструментов) ознакомьтесь с третьей частью.

Начнем с четвертой части. Следующие шаги предполагают, что вы уже настроили новый проект Angular 4 и включили библиотеку материалов Angular.

Начало работы с таблицами данных материалов Angular

Подготовка проекта

Чтобы продемонстрировать использование таблиц данных, давайте сначала добавим в проект новый компонент с помощью Angular CLI:

$ ng g component components/usertable

Эта команда создает следующие новые файлы в структуре вашего проекта:

src / app / components / usertable / usertable.component.css
src / app / components / usertable / usertable.component.ts
src / app / components / usertable / usertable.component.html
src / app / components / usertable / usertable.component.spec.ts

Позже мы будем использовать user usertable.component.ts и usertable.component.html для реализации вывода таблицы. Но перед этим давайте сначала добавим сервис в наше приложение Angular, используя следующую команду:

$ ng g service services/user

Эта команда добавляет в проект следующие новые файлы:

src / app / services / user.service.ts
src / app / services / user.service.spec.ts

Затем нам нужно импортировать MatTableModule в app.module.ts. Добавьте следующий оператор импорта:

import { MatTableModule } from '@angular/material';

Кроме того, добавьте оператор импорта для Angular HttpModule в начало этого файла:

import { HttpClientModule } from '@angular/common/http';

Мы будем использовать службу HttpClient (которая является частью HttpClientModule) в UserService для запроса пользовательских данных из веб-службы.

Также добавьте модули в массив импорта @NgModule:

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatTableModule
  ],

UserService необходимо включить в app.module.ts:

import { UserService } from './services/user.service';

Чтобы сделать эту службу доступной для всех наших компонентов, ее необходимо добавить в массив sizes декоратора @NgModule, как вы можете видеть на следующем рисунке:

providers: [UserService],

Реализация UserService

Перед отображением данных в таблице данных материалов Angular нам сначала нужно получить эти данные. Данные, которые мы хотим отображать, являются записями пользователей из веб-службы https://jsonplaceholder.typicode.com/users. Открытие этого URL-адреса в браузере возвращает пользовательские записи в формате JSON, как вы можете видеть на следующем снимке экрана:

Чтобы получить данные о пользователях из этой веб-службы, мы сначала реализуем UserService. Вставьте следующий код в файл user.service.ts: c

import { Injectable }   from '@angular/core';
import { HttpClient }   from '@angular/common/http';
import { Observable }   from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { User } from '../models/user.model';
@Injectable()
export class UserService {
  private serviceUrl = 'https://jsonplaceholder.typicode.com/users';
  
  constructor(private http: HttpClient) { }
  
  getUser(): Observable<User[]> {
    return this.http.get<User[]>(this.serviceUrl);
  }
  
}

Это типичный сервис Angular. Служба Http внедряется в класс службы, а метод службы getUser отправляет HTTP-запрос на получение URL-адреса внешней службы для извлечения данных. Эти методы возвращают Observable типа User []. Пользователь - это настраиваемый класс модели, который импортируется из src / app / models / user.model.ts. Этот файл еще не создан, поэтому нам нужно сделать это сейчас. Создайте этот новый файл, а затем вставьте следующий код, чтобы сделать доступным тип данных User:

export interface User {
    name: string;
    email: string;
    phone: string;
    company: {
        name: string;
    }
}

Реализация UsertableComponent

Затем давайте добавим реализацию для UsertableComponent в наше приложение. Начните со вставки следующего кода шаблона в файл usertable.component.html:

<div>
  <mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> E-Mail </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="phone">
      <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="company">
      <mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.company.name}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

Здесь мы используем элемент <mat-table></mat-table> для включения таблицы из библиотеки материалов Angular. Свойство dataSource этого элемента привязано к dataSource. dataSource - это объект типа DataSource, который будет реализован на следующем шаге.

Для каждого столбца таблицы используется элемент <ng-container> и применяется директива matColumnDef. Этой директиве присваивается строка с именем этих столбцов.

Внутри элемента <ng-container> каждый столбец состоит из

Элемент <mat-header-cell>, к которому применяется директива * matHeaderCellDef. Этот элемент содержит текст заголовка, который отображается в верхней части столбца.
Элемент <mat-cell>, содержащий содержимое ячейки. Здесь необходимо применить директиву * matCellDef и присвоить строку let user. Назначая эту строку, мы гарантируем, что сможем получить доступ к текущему элементу из источника данных через user.

Для завершения реализации шаблона нам нужно включить еще два элемента перед закрывающим тегом </mat-table>:

Необходимо добавить элементы <mat-header-row> и к этим элементам нужно добавить директиву * matHeaderRowDef. Этой директиве присваивается строка, содержащая имя массива, содержащего имена столбцов, которые должны отображаться в таблице. Массив displayColumns будет определен в реализации класса UsertableComponent на следующем шаге.
Затем добавляется элемент <mat-row> и добавляется директива * matRowDef.

После реализации кода шаблона мы можем продолжить реализацию соответствующего класса компонента в файле usertable.component.ts:

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../services/user.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/user.model';
@Component({
  selector: 'usertable',
  templateUrl: './usertable.component.html',
  styleUrls: ['./usertable.component.css']
})
export class UsertableComponent implements OnInit {
  dataSource = new UserDataSource(this.userService);
  displayedColumns = ['name', 'email', 'phone', 'company'];
  constructor(private userService: UserService) { }
  
  ngOnInit() {
  }
}
export class UserDataSource extends DataSource<any> {
  constructor(private userService: UserService) {
    super();
  }
  connect(): Observable<User[]> {
    return this.userService.getUser();
  }
  disconnect() {}
}

Сначала давайте посмотрим на реализацию класса UsertableComponent. Класс использует UserService. Сервис внедряется в конструктор класса.

Создаются два свойства класса:

Члены dataSource инициализируются новым экземпляром UserDataSource, класса, который создается ниже. Объект UserService передается конструктору UserDataSource.
Массив displayColumns, содержащий список имен столбцов для отображения

Класс UserDataSource создан и расширяет DataSource ‹any›. Этот класс содержит

Конструктор, который принимает объект UserService в качестве параметра.
Метод connect, который вызывает метод службы getUser и возвращает Observable типа User [].
Отключение метода

С этой реализацией конечный результат должен выглядеть так, как вы видите на следующем снимке экрана:

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Хотите глубже погрузиться в Angular. Ознакомьтесь со следующими онлайн-курсами:

Угловой материал - Часть 4: Таблица данных