Asp.net Core 对 Angular 材料表的响应

Question

如何填充来自 Asp.net core 的 Material Design Table 数据

这是我的 HTML 代码

<div>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="emp_Id">
        <th mat-header-cell *matHeaderCellDef> Emp_Id </th>
        <td mat-cell *matCellDef="let element"> {{element.emp_Id}} </td>
      </ng-container>

      <ng-container matColumnDef="emp_Name">
        <th mat-header-cell *matHeaderCellDef> Emp_name </th>
        <td mat-cell *matCellDef="let element"> {{element.emp_Name}} </td>
      </ng-container>

      <ng-container matColumnDef="actualLogin">
        <th mat-header-cell *matHeaderCellDef> Actual Login </th>
        <td mat-cell *matCellDef="let element"> {{element.actualLogin}} </td>
      </ng-container>

      <ng-container matColumnDef="actualLogout">
        <th mat-header-cell *matHeaderCellDef> Actual Logout </th>
        <td mat-cell *matCellDef="let element"> {{element.actualLogout}} </td>
      </ng-container>
      <ng-container matColumnDef="shiftLogin">
        <th mat-header-cell *matHeaderCellDef> Shift Login </th>
        <td mat-cell *matCellDef="let element"> {{element.shiftLogin}} </td>
      </ng-container>
      <ng-container matColumnDef="shiftLogout">
        <th mat-header-cell *matHeaderCellDef> Shift Logout </th>
        <td mat-cell *matCellDef="let element"> {{element.shiftLogout}} </td>
      </ng-container>
      <ng-container matColumnDef="bioLogin">
        <th mat-header-cell *matHeaderCellDef> Bio Login </th>
        <td mat-cell *matCellDef="let element"> {{element.bioLogin}} </td>
      </ng-container>
      <ng-container matColumnDef="bioLogout">
        <th mat-header-cell *matHeaderCellDef> Bio Logout </th>
        <td mat-cell *matCellDef="let element"> {{element.bioLogout}} </td>
      </ng-container>
      <ng-container matColumnDef="remarks">
        <th mat-header-cell *matHeaderCellDef> Remarks </th>
        <td mat-cell *matCellDef="let element"> {{element.remarks}} </td>
      </ng-container>
      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Date </th>
        <td mat-cell *matCellDef="let element"> {{element.date}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
  </div>

这是我的组件类的代码

export class DataCorrectionComponent implements OnInit {
  ELEMENT_DATA: DataCorrectionElement[]
  displayedColumns: string[] = ['emp_Id', 'emp_Name', 'actualLogin', 'actualLogout', 'shiftLogin',
            'shiftLogout', 'bioLogin', 'bioLogout', 'remarks', 'date'];
  dataSource = new MatTableDataSource(this.ELEMENT_DATA);

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  list: DataCorrectionElement[];

  form = new FormGroup({
    StartDate: new FormControl(),
    EndDate: new FormControl()
  });

  constructor(private http: HttpClient) { }

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

  onSubmit() {
    this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', this.form.value)
    .toPromise()
    .then(res => {
      this.list = res as this.list = res as DataCorrectionElement[];
      });

      console.log(this.list);
      this.dataSource = new MatTableDataSource(this.list);
  }

}

这就是模型

export interface DataCorrectionElement {
  emp_Name: string;
  emp_Id: number;
  actualLogin: string;
  actualLogout: string;
  shiftLogin: string;
  shiftLogout: string;
  bioLogin: string;
  bioLogout: string;
  remarks: string;
  date: string;
}

我有代码

console.log(this.list);

我期望返回来自 asp.net 核心的数据列表。但是在我的控制台上，我收到了undefined，但“网络”选项卡返回了一个值

类似的东西

{"emp_Name":"Some Name","emp_Id":1403,
"actualLogin":"04:59:01","actualLogout":"18:02:55",
"shiftLogin":"06:00:00",
"shiftLogout":"14:00:00"
,"bioLogin":""
,"bioLogout":"","remarks":"Overtime","date":"2019-04-01T00:00:00Z"}

我的代码有什么问题？为什么控制台返回显示undefined

我如何正确填充表格并将list设置为表格的数据源？

Answer 1

您的 console.log 语句在 .then 之外

onSubmit() {
this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', 
 this.form.value)
   .toPromise()
   .then(res => {
     this.list = res as this.list = res as DataCorrectionElement[];
     // update datasource after response is received.
     console.log(this.list);
     this.dataSource =  new MatTableDataSource(this.list)
  });

  console.log(this.list); // returns undefined
  this.dataSource = new MatTableDataSource(this.list);
}

Answer 2

我需要在获取数据时设置数据源，因为 http 是异步的，它会用未定义的值分配数据源。

  onSubmit() {
    this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', this.form.value)
    .toPromise()
    .then(res => {
      /*Here you assigning the value when its recieved*/
      this.dataSource = new MatTableDataSource(res);
      });

   /*if you do it here, you will get undefined, since the value isnt recieved yet*/
  }