从 Angular 中的对象数组获取数据

Question

我的 angular 应用程序中有一个对象数组，我正在尝试使用“for 循环”读取对象中的数据，但在控制台中什么也没有。以下是我如何创建数组对象的模型和其他详细信息。

file_info.model.ts

import { MSGraphService } from './../ms-graph.service';
export interface file_info {
  ms_graph: MSGraphService;
  file: any;
  sessionUrl: string;
}

upload.component.ts

import { file_info } from 'src/app/models/file_info.model';
...
export class UploadFileComponent implements OnInit {
  files: File[];
  fileInfo: file_info[] = [];
...
async uploadFile(files: File[]) {
    for (const file of files) {
    .....
      this.ms_graph
        .get_upload_session(fileType, fileName, this.itemId)
        .subscribe(
          async (response: MSCreateUploadSession) => {
            console.log(JSON.stringify(response));
            // this.progressText = "Session created.";
            this.sessionUploadURL = response.uploadUrl;

            let uploadData = {
              ms_graph: this.ms_graph,
              file: file,
              sessionUrl: this.sessionUploadURL,
            };

            this.fileInfo.push(uploadData);
          },
          (error) => {
            console.error(
              'Error get_upload_session() \n' + JSON.stringify(error)
            );
            throw error;
          }
        );
    }
    this.uploadMultipleFiles(this.fileInfo);
  }

现在我尝试从 "this.fileInfo"

读取数据

  uploadMultipleFiles(files: file_info[]) {
    console.log(files);
    // for(let fileInfo of files) {
    //   console.log(fileInfo);
    // }

    // files.forEach(element => {
    //   console.log(element.file);
    // });

    for(var i=0; i<=files.length; i++) {
      console.log(files[i].file);
    }
  }

我尝试了几种循环方法从 fileInfo 对象中提取数据，但控制台没有返回任何内容。当我控制台 files 时，它 returns 控制台中的一个数组。谁能告诉我如何从 fileInfo 数组迭代中获取 uploadData 变量数据？

Answer 1

这是因为

this.uploadMultipleFiles(this.fileInfo);

之前调用过

this.fileInfo.push(uploadData);

由于在您的订阅方法中被调用。

解决方案

在使用上传方法之前，您必须等待所有可观察对象填充 fileInfo 数组:)

您可以等待多个 observables 完成 forkJoin

Answer 2

您可以像下面这样使用，您需要在订阅部分调用该函数。

import { file_info } from 'src/app/models/file_info.model';
...
export class UploadFileComponent implements OnInit {
  files: File[];
  fileInfo: file_info[] = [];
...
async uploadFile(files: File[]) {
    for (const file of files) {
    .....
      this.ms_graph
        .get_upload_session(fileType, fileName, this.itemId)
        .subscribe(
          async (response: MSCreateUploadSession) => {
            console.log(JSON.stringify(response));
            // this.progressText = "Session created.";
            this.sessionUploadURL = response.uploadUrl;

            let uploadData = {
              ms_graph: this.ms_graph,
              file: file,
              sessionUrl: this.sessionUploadURL,
            };

            this.fileInfo.push(uploadData);
            // Call from here
            this.uploadMultipleFiles(this.fileInfo);

          },
          (error) => {
            console.error(
              'Error get_upload_session() \n' + JSON.stringify(error)
            );
            throw error;
          }
        );
    }
    // Here is the problem
    //this.uploadMultipleFiles(this.fileInfo);
  }

从 Angular 中的对象数组获取数据

Get data from array of object in Angular

loops

angular