Question

我使用角度材质表和分页器从后端通过http响应创建了表。

我有17个对象要显示，但是无法将它们注入到html表中，并且我的日志显示数据为[object Object]。

一些prt scr：

如何转换对象？如果我将[dataSource]="this.data"注入html，它的工作原理如下：

这是我将数据注入MatTableSource的方式：

console.log("Data: " + this.data);
    //for material paginator
    let dataSource = new MatTableDataSource<pe_processes>(this.data);
    dataSource.paginator = this.paginator;

我已经有了以下代码：

TS：

import { Component, OnInit, ViewChild } from '@angular/core';
import { pe_processes } from 'src/app/shared/processes.interface'
import { BackEndService } from 'src/app/shared/back-end.service';
import { MatPaginator, MatTableDataSource } from '@angular/material';

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

export class ProcessesComponent implements OnInit {

  //colunas da tabela
  displayedColumns: string[] = ['DOMAIN', 'PROC_TYPE', 'LAST_UPD_USER_ID', 'NAME', 'LAST_UPD_DATETIME', 'DEFAULT_AGENT_ID', 'STATUS',
    'N_PARAMETERS', 'WEIGHT', 'PROC_ID', 'FAIL_WITH_THREADS', 'CODE_TO_RUN', 'PARENT_PROC_ID'];

  //dados recebidos
  public data: pe_processes[] = new Array();

  //Materials Paginator
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private backend: BackEndService) { }

  ngOnInit() {
    //ao iniciar chamar o metodo para buscar os processes
    this.getIpeProcesses();
  }

  getIpeProcesses() {
    this.backend.getIpeProcesses().subscribe(
      response => {

        //se a resposta for nula, não apagar a resposta anterior
        if (response.length != 0) {
          this.data = [];
        }

        //ver o log da resposta
        console.log("IPE Processes Response: " + response);
        console.log("Response Lenght: " + response.length);

        //apenas para ver como funciona
        for (let i of response) {
          console.log('Domain: ' + i.DOMAIN);
          console.log('Proc_Type: ' + i.PROC_TYPE);
          console.log('Default Agent: ' + i.DEFAULT_AGENT_ID);
          console.log('PROC_ID: ' + i.PROC_ID);
          console.log('Isto é o i: ' + i);
        }

        //para cada resposta
        for (let i = 0; i < response.length; i++) {

          //fazer push na variavel
          this.data.push(
            {
              DOMAIN: response[i].DOMAIN,
              PROC_TYPE: response[i].PROC_TYPE,
              LAST_UPD_USER_ID: response[i].LAST_UPD_USER_ID,
              NAME: response[i].NAME,
              LAST_UPD_DATETIME: response[i].LAST_UPD_DATETIME,
              DEFAULT_AGENT_ID: response[i].DEFAULT_AGENT_ID,
              STATUS: response[i].STATUS,
              N_PARAMETERS: response[i].N_PARAMETERS,
              WEIGHT: response[i].WEIGHT,
              PROC_ID: response[i].PROC_ID,
              FAIL_WITH_THREADS: response[i].FAIL_WITH_THREADS,
              CODE_TO_RUN: response[i].CODE_TO_RUN,
              PARENT_PROC_ID: response[i].PARENT_PROC_ID
            });
        }
        console.log("Data: " + this.data);
        //for material paginator
        let dataSource = new MatTableDataSource<pe_processes>(this.data);
        dataSource.paginator = this.paginator;
      }
    )
  }

}

HTML：

<h3>Processes</h3>
<button class="btn btn-primary" (click)="getIpeProcesses()" [disabled]="false">Refresh</button>
<br>
<br>

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="this.data">

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

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

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

    <!-- Weight Column -->
    <ng-container matColumnDef="LAST_UPD_USER_ID">
      <th mat-header-cell *matHeaderCellDef> LAST_UPD_USER </th>
      <td mat-cell *matCellDef="let data"> {{data.LAST_UPD_USER_ID}} </td>
    </ng-container>

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

    <ng-container matColumnDef="LAST_UPD_DATETIME">
      <th mat-header-cell *matHeaderCellDef> LAST_UPD_DATE </th>
      <td mat-cell *matCellDef="let data"> {{data.LAST_UPD_DATETIME}} </td>
    </ng-container>

    <ng-container matColumnDef="DEFAULT_AGENT_ID">
      <th mat-header-cell *matHeaderCellDef> DEFAULT_AGENT </th>
      <td mat-cell *matCellDef="let data"> {{data.DEFAULT_AGENT_ID}} </td>
    </ng-container>

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

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

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

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

    <ng-container matColumnDef="FAIL_WITH_THREADS">
      <th mat-header-cell *matHeaderCellDef> FAIL_W_THREADS </th>
      <td mat-cell *matCellDef="let data"> {{data.FAIL_WITH_THREADS}} </td>
    </ng-container>

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

    <ng-container matColumnDef="PARENT_PROC_ID">
      <th mat-header-cell *matHeaderCellDef> PARENT_PROC </th>
      <td mat-cell *matCellDef="let data"> {{data.PARENT_PROC_ID}} </td>
    </ng-container>

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

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

Angular 6-分页器-[object Object]

0 个答案: