Asp.net 核心回应 Angular Material Table

Question

如何填充 Material 设计 Table 来自 Asp.net 核心

的数据

这是我的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>

这是我的组件的代码 class

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

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

像这样

{"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"}

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

以及如何正确填充 table 并将 list 设置为 table 的数据源？

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*/
  }

Asp.net 核心回应 Angular Material Table

Asp.net Core response to Angular Material Table

angular

angular-material

angular-material-table