Angular 10 - 数组上的链式承诺不计算所有属性

Question

我是 Angular 和 TypeScript 的新手，遇到了一个问题： 我有一个 LabObject 模型类型的对象数组：我的 LabObject 模型有很多属性，以及两个计算出来的私有属性（private _labTest: number 和 private _vitalSign: number）。

我创建了一个 LabObject 类型的数组并使用 for 循环填充它。自然，我注意到这两个计算在循环仍在运行时并没有完成，因为它们很重，所以我想我会使用一个 Promise。 我想如果我在第一个 Promise 中运行循环，然后在此之后链接两个 Promise，每个计算一个 Promise，它会强制我的计算在我对该数组执行任何其他操作之前完成运行。

似乎我错了，因为并非所有数组元素都以计算出的 _labTest 和 _vitalSign 结束，并且在某些元素中，缺少其中一个或两个。

这是我的方法：

createFile() {

    let getLabObject = new Promise((resolve, reject) => {
      let lab_objects: LabObject[] = [];
      for (let i = 0; i < 10; i++) {
        let lo = this.createLabObject();
        lab_objects.push(lo);
      }
      resolve(lab_objects);
    });

    let getLabTest = objects => {
      return new Promise((resolve, reject) => {
        objects.forEach(item => {
          item.CalculateLabTest();
        });
        resolve(objects);
      });
    };

    let getVitalSign = objects => {
      return new Promise((resolve, reject) => {
        objects.forEach(item => {
          item.CalculateVitalSign();
        });
        resolve(objects);
      });
    };

    let backend = objects => {
      this.http.post('my backend url address', JSON.stringify(objects))
        .subscribe(responseData => {
          console.log(responseData);
        });
    }

    getLabObject.then(objects => {
      return getLabTest(objects);
    }).then(objects => {
      return getVitalSign(objects);
    }).then(objects => {
      return backend(objects);
    });

  }

我得到一个看起来像这样的 JSON 对象：

[{id: 1, name: 'name1'},
{id: 2, name: 'name2', _labTest: 10},
{id: 3, name: 'name3', _vitalSign: 17},
{id: 4, name: 'name4', _labTest: 8, _vitalSign: 6}]

但我希望为每个元素计算 _labTest 和 _vitalSign。 我做错了什么？

Answer 1

我认为您不需要为此做出承诺。实际上异步代码可能是导致对象不完整的原因。

您正在寻找的是getter function。这使您可以访问一个计算值的方法，就好像它是一个属性一样。因此，它始终是正确且易于访问的。添加一个函数以从您的 LabObject 中提取一个对象，然后您就可以将其提交到您的后端了。

检查这个StackBlitz

app.component.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  labtest: LabObject[] = [];
  ngOnInit() {
    this.labtest.push( new LabObject( 2, 8 ) );
    this.labtest.push( new LabObject( 2, 5 ) );
    this.labtest.push( new LabObject( 34, 1 ) );
    this.labtest.push( new LabObject( 10, 1 ) );
  }
  log() {
    const json = this.labtest.map( labtest => labtest.as_object() );
    console.log( JSON.stringify(json) );
    // instead of logging you want to submit the JSON to your backend to do whatever you wanted to do...
  }
}

class LabObject {
  constructor( 
    public type_a_test: number, 
    public type_b_test: number 
  ) {}

  private get _labTests(): number {
    return this.type_a_test + this.type_b_test;
  }
  private get _vitalSign(): number {
    return 2;
  }
  public as_object(): object {
    return {
      labtests: this._labTests, 
      vitalsigns: this._vitalSign
    }
  }
}