Как я могу заполнить Угловую Мат-Таблицу Наблюдаемой - PullRequest
Новая
       18

Как я могу заполнить Угловую Мат-Таблицу Наблюдаемой

0 голосов
/ 24 мая 2019

Я пытаюсь получить данные из таблицы AWS DynamoDB и отобразить их в угловой таблице. Когда я это делаю, созданный массив возвращает длину 0, хотя в нем 12 значений. Я считаю, что это препятствует тому, чтобы Mat-Table воздействовал на изменение источника данных и в конечном итоге отображало данные.

Результаты консоли 

Observable {_isScalar: true, _subscribe: ƒ, value: Array(0)}
value: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
_isScalar: true
_subscribe: ƒ (subscriber)
__proto__: Object

Код компонента 

constructor(private dynamoService: DataDynamoService) {
    let dataSource: Observable<Record[]> = 
this.dynamoService.getAllRecords();
    console.log(dataSource);
}

Код сервисной функции 

getAllRecords(): Observable<Record[]> {
  let dynDoc = {
  TableName: "records-table",
  };

  let retData: Record[] = [];
  Auth.currentCredentials()
    .then(credentials => {
      const dynamoDB = new DynamoDB.DocumentClient({
        credentials: Auth.essentialCredentials(credentials),
        region: 'us-east-1',
      });

      dynamoDB.scan(dynDoc).promise()
        .then(function(data){
          for(let record of data.Items){
            let rec = {
              value1: rec.value1,
              value2: rec.value2,
              value3: rec.value3,
              value4: rec.value4
            }
            retData.push(rec);
           }
        })
  })
  return of(retData);
}

Я ожидаю Array (12) для длины, но получаю 0

Это сервисный код, который в конечном итоге сработал: 

getAllRecords() {
  let dynDoc = {
    TableName: "my-table-name",
  };

  return Auth.currentCredentials()
    .then(credentials => {
      const dynamoDB = new DynamoDB.DocumentClient({
        credentials: Auth.essentialCredentials(credentials),
        region: 'us-east-1',
      });

      return dynamoDB.scan(dynDoc).promise()
        .then(data => {return of(data.Items);
        })
    })
}

Ответы [ 2 ]

0 голосов
/ 25 мая 2019

Вы можете использовать async и await для ожидания обещаний. 

async getAllRecords(): Observable<Record[]> {
    let dynDoc = {
        TableName: "records-table",
    };
    const credentials = await Auth.currentCredentials();

    const dynamoDB = new DynamoDB.DocumentClient({
        credentials: Auth.essentialCredentials(credentials),
        region: 'us-east-1',
    });

    let retData: Record[] = [];
    const data = await dynamoDB.scan(dynDoc).promise();
    for(let record of data.Items){
        let rec = {
        value1: rec.value1,
        value2: rec.value2,
        value3: rec.value3,
        value4: rec.value4
        }
        retData.push(rec);
    }

    return of(retData);
}

Если dynamoDB.scan(dynDoc) возвращает Observable, вы можете просто использовать 

async getAllRecords(): Observable<Record[]> {
    let dynDoc = {
      TableName: "records-table",
    };

    const credentials = await Auth.currentCredentials();

    const dynamoDB = new DynamoDB.DocumentClient({
      credentials: Auth.essentialCredentials(credentials),
      region: 'us-east-1',
    });

    return dynamoDB.scan(dynDoc).pipe(
      map(data =>
        data.map(rec => ({
          value1: rec.value1,
          value2: rec.value2,
          value3: rec.value3,
          value4: rec.value4
        }))
      )
    );
}
0 голосов
/ 24 мая 2019

retData заполняется после выполнения обещаний, но функция не ждет этого.Таким образом, это всегда будет []

Код компонента 

_dataSource: any[] = []; <-- Data bound to mat-table

constructor(private dynamoService: DataDynamoService) {
    this.dynamoService.getAllRecords().then(data => { // <-- value on promise completion
      this._dataSource = data; // <-- set MatTable source to promise values
      console.log(data, this._dataSource);
    });
}

Сервисный код 

getAllRecords(): Promise<Record[]> { // <-- Return a promise, not observable
  let dynDoc = {
  TableName: "records-table",
  };

  let retData: Record[] = [];
  return Auth.currentCredentials() // <--- return outer promise
    .then(credentials => {
      const dynamoDB = new DynamoDB.DocumentClient({
        credentials: Auth.essentialCredentials(credentials),
        region: 'us-east-1',
      });

      return dynamoDB.scan(dynDoc).promise() // <-- return inner promise 
        .then(function(data){
          for(let record of data.Items){
            let rec = {
              value1: rec.value1,
              value2: rec.value2,
              value3: rec.value3,
              value4: rec.value4
            }
            retData.push(rec);
           }

          return retData; // <-- return the data outside the loop, still inside promise
        })
  })
}

Код шаблона (для компонента) 


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

...

</mat-table>

Если у DynamoDB есть возможность использовать наблюдаемые, я бы переключился на это.

...