Typescript - 无法读取未定义的 属性 'push'

Question

我正在努力将值简单地推入数组。这是我的代码：我正在尝试翻译 Angular 应用程序，但信息不在 html 中，而是在 ts 文件中。

export class EventReportModalComponent implements OnInit {
  reasons: Array<string>;
  reasonsKeys = [
    'report.reason.nudity',
    'report.reason.hate-speech',
    'report.reason.violence',
    'report.reason.bullying',
    'report.reason.false-information',
    'report.reason.undesirable-content',
    'report.reason.other',
  ];

  constructor(
    private translate: TranslateService
  ) {
    let reasons;
    for (let item of this.reasonsKeys) {
      this.translate.get(item).subscribe(res => {
        reasons.push(res);
      });
    }

    this.reasons = reasons;
  }

  ngOnInit(): void {
  }
}

我有这个错误：

TypeError: Cannot read property 'push' of undefined

我不明白如何在 javascript 中实现这一点。我哪里做错了？

Answer 1

在构造函数中使用 -

初始化 reasons 变量

let reasons = [];

Answer 2

您的代码中有 2 个问题。

1. 未定义reasons

您必须先 reasons 初始化一个空数组，然后才能 push 将某些内容放入其中：
let reasons = [];

2. 异步函数

this.translate.get 是异步的。所以当这不是正确的方法时。 您应该改为将项目动态推送到最终对象。

let reasons;
for (let item of this.reasonsKeys) {
  this.translate.get(item).subscribe(res => {
    reasons.push(res);
  });
}

this.reasons = reasons; // reasons is empty, because this.translate.get did not answer yet

为什么不直接推入 this.reasons 而不是？

Answer 3

translate.get 接受一个数组，因此您应该能够一次性获得翻译：

this.translate.get(this.reasonsKeys).subscribe(res => {
  this.reasons = res;
});

注意：如果您开始使用 ngx-translate，请注意它可能不会进一步开发：https://github.com/ngx-translate/core/issues/783