Угловая таблица материалов - проблемы с асинхронным источником данных - PullRequest
Новая
       38

Угловая таблица материалов - проблемы с асинхронным источником данных

0 голосов
/ 07 ноября 2018

Я пытаюсь заполнить таблицу угловых материалов данными, загруженными асинхронно из AWS DynamoDB, но лучшее, что я могу сделать, - это отобразить таблицу с тремя ожидаемыми элементами, все свойства которых возвращаются в каждой ячейке, как [объектный объект].

Процесс работает так:

  • В AllInvoicesComponent.ngOnInit () выполните buildTable (),
  • Await DataService.getItems («счета»),
  • Назначение источника данных как нового MatTableDataSource (AllInvoicesComponent.invoices)

Канал 'async' также абсолютно ничего не делает для атрибута dataSource table.

data.service.ts: 

import { Injectable } from '@angular/core';
import * as aws from 'aws-sdk';
import { Observable } from 'rxjs';
import AuthService from '@app/services/auth.service';

@Injectable({
  providedIn: 'root'
})

export class DataService {

  dynamodb;
  docClient;

  constructor(private auth: AuthService) {
    aws.config.credentials = new aws.Credentials(auth.credentials.accessKeyId, auth.credentials.secretAccessKey, null);
    aws.config.update({
        region: 'eu-west-1'
    })

    this.dynamodb = new aws.DynamoDB();
    this.docClient = new aws.DynamoDB.DocumentClient();
  }

  async getItems(tableName) {
    const params = {
        TableName: tableName
    }

    return new Promise((resolve, reject) => {
        this.dynamodb.scan(params, (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data.Items);
            }
        })
    })
  }
}

все-invoices.component.ts: 

import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable, from } from 'rxjs';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';

import Invoice from '../invoice.interface';
import { DataService } from '../../services/data/data.service';

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

export class AllInvoicesComponent implements OnInit {

  invoices;

  dataSource: MatTableDataSource<any>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  tableColumns = [
    'number',
    'reference'
  ]

  constructor(private database: DataService) {

  }

  ngOnInit() {
    this.buildTable();
  }

  async buildTable() {
    try {
        this.invoices = await this.database.getItems('invoices');
        this.dataSource = new MatTableDataSource(this.invoices);
    } catch(err) {
        console.error(`Error retrieving invoices: ${err.Message}`);
        // TODO:
    }
  }

}

все-invoices.component.html: 

<p>All Invoices</p>

<br>

<div class="spinner-container" *ngIf="dataSource.loading$ | async">
  <mat-spinner></mat-spinner>
</div>

<table mat-table [dataSource]="dataSource" matSort>

  <ng-container matColumnDef="number">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Number</th>
    <td mat-cell *matCellDef="let invoice">{{invoice.number}}</td>
  </ng-container>

  <ng-container matColumnDef="reference">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Reference</th>
    <td mat-cell *matCellDef="let invoice">{{invoice.reference}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: tableColumns">

</table>

<mat-paginator [length]="dataSource.length" [pageSize]="25" [pageSizeOptions]="[5, 10, 25, 50]"></mat-paginator>

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

DYNAMODB!

Это было результатом того, что DynamoDB бессмысленно возвращал каждое свойство объекта в виде объекта, содержащего как значение, так и тип поля в качестве свойств.

0 голосов
/ 07 ноября 2018

Вы присваиваете new MatTableDataSource(this.invoices); для this.dataSource.data, но объект данных - это просто необработанные данные. Так что просто исправьте ваш код на 

this.dataSource = new MatTableDataSource(this.invoices);

и тебе должно быть хорошо.

Типпы: Источник данных MatTable не обязательно должен быть элементом MatTableDataSource. Вы можете просто передать необработанные данные в атрибут [dataSource].

...