angular5物料表数据源错误

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

我在Angular 5上有一个使用typescript的全新项目。我只是想从以下地方复制这个示例：|具体来说就是“具有排序、分页和筛选功能的数据表”

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

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>

身份证件
{{i['title']}}}
进展
{{row.progress}}}%
名称
{{row.name}
颜色
{{row.color}}

组件。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))]
  };
}

导出接口用户数据{
id：字符串；
名称：字符串；
进展：字符串；
颜色：字符串；
}
/**用于填充数据库的常量*/
常量颜色：字符串[]=['maroon'，'red'，'orange'，'yellow'，'olive'，'green'，'purple'，
“紫红色”、“青柠色”、“青绿色”、“水绿色”、“蓝色”、“海军蓝”、“黑色”、“灰色”]；
常量名称：字符串[]=['Maia'，'Asher'，'Olivia'，'Atticus'，'Amelia'，'Jack'，'，
“夏洛特”、“西奥多”、“艾拉”、“奥利弗”、“伊莎贝拉”、“贾斯珀”，
‘科拉’、‘李维’、‘紫罗兰’、‘亚瑟’、‘米娅’、‘托马斯’、‘伊丽莎白’；
/**
*@title数据表，具有排序、分页和筛选功能。
*/
导出类TableOverview示例实现OnInit{
displayedColumns:string[]=['id'，'name'，'progress'，'color']；
数据源：MatTableDataSource；
@ViewChild（MatPaginator）分页器：MatPaginator；
@ViewChild（MatSort）排序：MatSort；
构造函数（）{
//创建100个用户
constusers=Array.from（{length:100}，（u，k）=>createNewUser（k+1））；
//将数据指定给要呈现的表的数据源
this.dataSource=新MatTableDataSource（用户）；
}
恩戈尼尼特（）{
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（）；
}
}
}
/**生成并返回一个新用户*/
函数createNewUser（id:number）：UserData{
常数名=
名称[Math.round（Math.random（）*（NAMES.length-1））]+''+
名称[Math.round（Math.random（）*（NAMES.length-1））].charAt（0）+'；
返回{
id:id.toString（），
姓名:姓名,，
进度：Math.round（Math.random（）*100）.toString（）,，
颜色：颜色[Math.round（Math.random（）*（COLORS.length-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>

身份证件
{{row.id}}

控制台中有什么东西吗？请提供一个最小、完整且可验证的示例，我们可以使用它来帮助解决问题。没有任何@prashantpimpale发布您的代码以寻求他人的帮助。我想查看您的代码！