Question

我有一系列商品及其商品编号。

0:"3323"
1:"3319"
2:"3322"
3:"3331"
4:"3309"
5:"3317"
6:"3316"
7:"3329"
8:"3330"
9:"3332"
10:"3324"

我正在将该数组的每个顶点编号传递给服务，以获取各个产品的详细信息以显示图像。当我将每个产品的图像属性推入数组时，每次在每个索引处获得不同的值时。

我希望每篇文章的图像都在相同的索引上，就像上面的数组一样。示例：3323在新数组中第0个索引处的图像。

werbedata: WerbeData[];
produkt: Produkt[];
urls: string[] = [];

  getWerbeData(filialewerbenr) {
    this.werbedataService.getWerbeData(filialewerbenr)
      .then(
        (werbedata) => {
          this.werbedata = werbedata[0];
          this.anums = this.werbedata.ArtNr.split(' ');
          console.log(this.anums);
          for (let i = 1; i < this.anums.length; i++) {
            let articleNumber = this.anums[i];
            this.produktService.getProdukt(articleNumber)
              .then(
                (product) => {
                  this.produkt = product[0];
                  this.urls.push(this.produkt.PfadBild_1);
                }
              );
          }
        },
    )
  }

我在哪里做错了，以便可以在相应的索引处获得相应的产品详细信息？

Answer 1

一个数组从索引0开始。您的for循环从i = 1开始。因此，您始终获得以下项目，而不是您期望的项目。

=> for（让i = 0; i

热烈的问候

更新：我的错。您正在遍历数组（同步），但是随后进行异步调用以获取其他数据。没有任何保证，第一个被调用的异步调用也将是第一个完成的异步调用。

因此，最后的顺序很大程度上取决于此异步调用

 this.produktService.getProdukt(articleNumber)

更新2：解决的办法是建立一个结果结构。在那里，您必须以正确的顺序交付async .getProduct调用的所有结果。然后，您必须检查所有异步调用是否都已完成... 然后，您可以遍历结果结构并以正确的顺序获取数据。

这是我承诺的一段时间（我真的很爱rxjs :-)）因此，将索引信息和计数器传输到.then方法中可能会出现问题...

let resultData = [];
let counter = 0;
for (let i = 1; i < this.anums.length; i++) {
        let articleNumber = this.anums[i];
        counter++;
        this.produktService.getProdukt(articleNumber)
          .then(
            (product) => {
              this.produkt = product[0];
              resultData[i] = this.produkt.PfadBild_1;
              counter--;
            }
          );
      }
      // Now wait until counter reaches again 0, than your result structure should be up to date.

Answer 2

您可以跟踪所有诺言，并等待所有诺言兑现。下面的代码段显示了如何执行此操作。

const
  productNumbers = ["3323","3319","3322","3331","3309","3317","3316","3329","3330","3332","3324"];
  
function getWerbeData(id) {
  // Do your webservice call and make sure it returns a promise. This code 
  // will wait between 500ms and 1000ms before returning a fake result.
  console.log(`[${id}] - getting data`);
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`[${id}] - data received`);
      resolve(`result for ${id}`)
    }, (Math.random() * 500) + 500);
  });
}

const
  // Creates a new array with for each product number a promise.
  promises = productNumbers.map(productNumber => getWerbeData(productNumber));
  
// Wait for all the promises to be resolved and print a log line.
Promise.all(promises)
  .then(() => console.log('all data retrieved'));

for循环的怪异行为

2 个答案: