Блог

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

что-то вроде этого

 {"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 качестве источника данных таблицу?

Ваша консоль.оператор log находится за пределами .тогда

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

Если вам нужно установить источник данных, когда вы получаете данные, поскольку 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*/
  }