Question

我无法获得其他任何stackoverflow问题解决方案来解决此问题。

我有一个使用打字稿的Angular 5全新项目。我只是想复制以下示例：https://material.angular.io/components/table/examples |尤其是示例：“具有排序，分页和过滤功能的数据表。”

我没有收到任何错误，但是数据没有显示在表中。有人找到解决此问题的方法吗？

HTML：

<mat-form-field>
                                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
                              </mat-form-field>

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

                                  <!-- ID Column -->
                                  <ng-container matColumnDef="id">
                                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
                                    <td mat-cell *matCellDef="let row"> {{i['title']}}} </td>
                                  </ng-container>

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

                                  <!-- Name Column -->
                                  <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>

                                  <!-- Color Column -->
                                  <ng-container matColumnDef="color">
                                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
                                    <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>
                                  </ng-container>

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

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

component.ts

export interface UserData {
  id: string;
  name: string;
  progress: string;
  color: string;
}

/** Constants used to fill up our data base. */
const COLORS: string[] = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
const NAMES: string[] = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];

/**
 * @title Data table with sorting, pagination, and filtering.
 */

export class TableOverviewExample implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
  dataSource: MatTableDataSource<UserData>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor() {
    // Create 100 users
    const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1));

    // Assign the data to the data source for the table to render
    this.dataSource = new MatTableDataSource(users);
  }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

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

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

/** Builds and returns a new User. */
function createNewUser(id: number): UserData {
  const name =
      NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
      NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';

  return {
    id: id.toString(),
    name: name,
    progress: Math.round(Math.random() * 100).toString(),
    color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
  };
}

Answer 1

您的代码带有错误，请在html文件和Id列中将其更改为{{row.id}}，它将起作用

    <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>

angular5材质表数据源错误

1 个答案: