Angular 10 - Chained Promise on Array不计算所有属性

Question

我刚接触Angular和TypeScript，遇到了一个问题:我有一个LabObject模型类型的对象数组:我的LabObject模型有相当多的属性，以及两个计算出来的私有属性(private _labTest: number和private _vitalSign: number)。

我创建了一个LabObject类型的数组，并使用for循环填充它。当然，我注意到这两个计算在循环仍在运行时不会完成，因为它们相当繁重，所以我想我应该使用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。这允许您访问一个方法，该方法计算一个值-如果它是一个属性。因此，它始终是正确的，并且易于访问。

检查此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
    }
  }
}