数据源数据未填充

Question

我是 Angular 的新宝宝（目前使用 14.2.10）需要拨打 REST 并在 UI 中填充数据。 但我可以看到只有 header 没有任何数据。 我觉得有些小问题（无法弄清楚）。 在开发人员控制台中，我可以看到数据正在填充。 但不是在用户界面中。

请找到我的 html 和 TS 文件。

app.component.html

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

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

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

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

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

  <!-- office Column -->
  <ng-container matColumnDef="office">
    <th mat-header-cell *matHeaderCellDef> office </th>
    <td mat-cell *matCellDef="let Employees"> {{Employees.office}} </td>
  </ng-container>

  <!-- salary Column -->
  <ng-container matColumnDef="salary">
    <th mat-header-cell *matHeaderCellDef> salary </th>
    <td mat-cell *matCellDef="let Employees"> {{Employees.salary}} </td>
  </ng-container>
 
</table>

应用程序组件.ts

import { Component } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { DataSource } from '@angular/cdk/table';


export interface Employees {
  name: string;
  position: string;
  office:string ;
  salary: number;
}


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Sample-App';
  li:any;
  lis=[];
  datasource: any;
  displayedColumns: string[] = ['name', 'position', 'office', 'salary'];
  
     
  constructor(private http : HttpClient){     
  }

  ngOnInit() {
    this.http.get('http://www.mocky.io/v2/5ea172973100002d001eeada')
    .subscribe(Response => {
 
      console.log(Response)
      this.li=Response;
      this.lis=this.li.list;
      this.datasource = new MatTableDataSource(this.lis);
      console.log(this.datasource)
      });
    
  }

}

Output：

在开发者模式下我可以看到

请纠正我哪里出错了。

Answer 1

你的代码很好。 看这里： Stackblitz

看起来您需要修复依赖项。 您使用的是 Angular 14.2.10，但使用的是 Material 13.0 和 Material CDK 13.3.9。

编辑

在出现错误之前，我更新了 Stackblitz：

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.

您提供的 URL 不安全，因此我更改为：

http://www.mocky.io/v2/5ea172973100002d001eeada到https://www.mocky.io/v2/5ea172973100002d001eeada

Stackblitz 可与您提供的代码的 rest 配合使用。