Ответ ядра Asp.net на таблицу угловых материалов

Question

Как мне заполнить данные таблицы конструирования материалов, полученные из ядра 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>

И это код для моего класса компонентов

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