Angular Material 7 – 列表

在使用Angular Material 7时，我们经常需要使用列表来展示数据。Angular Material提供了丰富的列表组件，可以轻松创建出美观且易于使用的列表。

Mat列表

Mat列表是Angular Material中最常见的列表组件之一。Mat列表可以显示文本、图标、代码等多种内容，并且支持分页和过滤，非常适用于需要展示大量数据的场合。下面是一个简单的Mat列表示例：

import {Component} from '@angular/core';

/**
 * @title Basic list
 */
@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
  styleUrls: ['list-overview-example.css'],
})
export class ListOverviewExample {}

<mat-list>
  <mat-list-item>
    <h3 matLine>First Item</h3>
    <p matLine>This is a summary of the item</p>
  </mat-list-item>
  <mat-list-item>
    <h3 matLine>Second Item</h3>
    <p matLine>This is a summary of the item</p>
  </mat-list-item>
  <mat-list-item>
    <h3 matLine>Third Item</h3>
    <p matLine>This is a summary of the item</p>
  </mat-list-item>
</mat-list>

在这个示例中，我们创建了一个简单的Mat列表，列表中包含了三个项，每个项包含了一个标题和一个描述。其中，mat-line是一个指令，用于在列表项中添加一行文本。

Mat表格

Mat表格是Angular Material中的另一个常见的列表组件。和传统的HTML表格类似，Mat表格可以显示多列数据，并支持排序、分页和过滤等功能。下面是一个简单的Mat表格示例：

import {Component} from '@angular/core';

/**
 * @title Basic table
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {}

<mat-table [dataSource]="dataSource">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>

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

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
  </ng-container>

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

在这个示例中，我们创建了一个简单的Mat表格，表格中包含了四列数据，分别是位置、名称、重量和符号。mat-header-cell是一个指令，它用于在表头中创建一个单元格，而mat-cell则用于在数据行中创建单元格。

Mat选择列表

Mat选择列表是Angular Material中的另一个常见的列表组件。和普通的列表不同，Mat选择列表可以让用户选择一个或多个选项，并且支持搜索和过滤。下面是一个简单的Mat选择列表示例：

import {Component} from '@angular/core';

/**
 * @title Dual listbox
 */
@Component({
  selector: 'list-option-example',
  templateUrl: 'list-option-example.html',
})
export class ListOptionExample {
  /** Whether the button toggle group should allow multiple selections. */
  multiple = false;

  /** Whether to show the option checkboxes to the user. */
  showCheckboxes = true;

  /** Whether to show filter search bar */
  showFilter = true;

  /** Filter keyword entered by user */
  filter: string;

  /** Available fruit */
  fruits: Fruit[] = [
    {name: 'Apple', selected: false},
    {name: 'Banana', selected: false},
    {name: 'Orange', selected: false},
    {name: 'Mango', selected: false},
    {name: 'Kiwi', selected: false},
  ];

  /** Return the selected fruits */
  getSelectedFruits(): Fruit[] {
    return this.fruits.filter(fruit => fruit.selected);
  }

  /** Select all available fruit */
  selectAll() {
    this.fruits.forEach(fruit => (fruit.selected = true));
  }

  /** Deselect all available fruit */
  deselectAll() {
    this.fruits.forEach(fruit => (fruit.selected = false));
  }
}

interface Fruit {
  name: string;
  selected: boolean;
}

<mat-selection-list #fruitList [multiple]="multiple">
  <div class="example-header">
    <mat-checkbox (click)=" $event.stopPropagation()" (change)="showCheckboxes = !showCheckboxes"> Show checkboxes </mat-checkbox> <mat-checkbox (click)="$ event.stopPropagation()"
                  (change)="showFilter = !showFilter">
      Show filter
    </mat-checkbox>

    <div class="example-spacer"></div>

    <mat-checkbox (click)=" $event.stopPropagation()" (change)="selectAll()"> Select all </mat-checkbox> <mat-checkbox (click)="$ event.stopPropagation()" (change)="deselectAll()">
      Deselect all
    </mat-checkbox>

    <div class="example-spacer"></div>

    <span>{{getSelectedFruits().length}}/{{fruits.length}} selected</span>
  </div>

  <mat-list-option *ngFor="let fruit of fruits" [value]="fruit" [ngClass]="{'example-selected': fruit.selected}">
    <mat-checkbox *ngIf="showCheckboxes" [(ngModel)]="fruit.selected">
    </mat-checkbox>
    {{fruit.name}}
  </mat-list-option>

  <mat-divider></mat-divider>

  <mat-form-field *ngIf="showFilter">
    <input type="text" matInput placeholder="Filter" [(ngModel)]="filter">
  </mat-form-field>
</mat-selection-list>

在这个示例中，我们创建了一个简单的Mat选择列表，可供用户选择多个水果。选择列表有多个选项，以及一个搜索框和一个复选框，用于显示或隐藏选项复选框。我们还可以选择所有选项或取消所有已选中的选项。

Mat导航列表

Mat导航列表是一个常见的组件，经常用于创建侧栏导航菜单。Mat导航列表支持折叠、分组、父子层级等功能。下面是一个简单的Mat导航列表示例：

import {Component} from '@angular/core';

/**
 * @title Basic drawer
 */
@Component({
  selector: 'drawer-overview-example',
  templateUrl: 'drawer-overview-example.html',
  styleUrls: ['drawer-overview-example.css'],
})
export class DrawerOverviewExample {}

<mat-drawer-container class="example-container">
  <!-- Drawer content -->
  <mat-drawer #drawer class="example-drawer">
    <button mat-button (click)="drawer.close()">Close drawer</button>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
      <a mat-list-item href="#">Link 4</a>
    </mat-nav-list>
  </mat-drawer>

  <!-- Main content -->
  <mat-drawer-content>
    <button mat-button (click)="drawer.open()">Open drawer</button>
    <p>Main content</p>
  </mat-drawer-content>
</mat-drawer-container>

在这个示例中，我们使用了一个Mat导航列表，包含了四个链接。使用Mat导航列表时，我们需要将它放置在Mat抽屉中，这样才能实现侧栏导航的效果。