Angular - 在每次 forEach 迭代后插入值

Posted 2023-02-22

【中文标题】Angular - 在每次 forEach 迭代后插入值

【英文标题】：Angular - interpolating values after every forEach iteration

【发布时间】：2022-01-20 18:51:39

【问题描述】：

我正在构建一个 Angular 应用程序，并且我试图在字符串数组的每个 forEach 迭代中插入一个字符串的值。 （quotesData 是我从中获取值的字符串数组）

我的函数如下所示：

export() 
this.quotesData.forEach(element => 
  this.quote = element;
  this.wait(1000); \\ <- manually written function to postpone next line execution for 1s
  console.log(this.quote);
);

问题是 quote 的 html 插值中的值在最后一次迭代结束之前不会更新。但是，this.quote 的值会在每次迭代后正确更新并显示在控制台和调试器中。

【参考方案1】：

我不确定您的等待功能是如何实现的，但我猜它仍然异步运行。为了解决它，我建议例如将时间增加到 5000 并检查值是否立即显示在控制台中。

否则，这是一个使用异步等待的工作示例：

import  Component  from '@angular/core';

@Component(
  selector: 'hello',
  template: `<button (click)="display()" >Display</button><h1>Hello quote!</h1>`,
)
export class HelloComponent 
  quotesData: Array<string> = ['A', 'B', 'C'];
  quote: string = '';

  wait(ms) 
    return new Promise((res) => setTimeout(res, ms));
  

  async display() 
    for (let quote of this.quotesData) 
      this.quote = quote;
      await this.wait(1000);
      console.log(this.quote);