Angular Chrome 中的 6 个错误，函数 ($event) 随机抛出错误 "can't read property "value" of undefined"

Question

似乎按钮由 ngFor 正确迭代，如果我检查它们，它们具有正确的属性，但是，当我单击它们时，控制器中的函数声称参数是 'undefined'然后，我估计大部分时间是 50-50，相当随机。

这是我得到的错误：ERROR TypeError: Cannot read 属性 'value' of undefined at（在控制器中将属性作为参数传递的行）

当所有逻辑都在其控制器中时，一切正常。但是我决定重构它并使用服务+拦截器。现在，我已经在服务中包含了 headers 和参数。

问题是，在 Firefox 中一切正常，没有错误，Chrome 似乎是唯一遇到此错误的人。如果我一直点击它，它会在一段时间内不断抛出错误，直到它正常工作。这是一个屏幕录像：https://streamable.com/5f7og

注意：如果我只是等待而不是一次又一次地点击——没有任何反应。查看网络选项卡显示 http 调用根本没有触发。

代码如下：

前端：

<div *ngFor="let button of lvl0 | errorfix">
  <!-- Actual buttons reiterated with ngIF -->
  <button mat-raised-button color="accent" [attr.data-param1]=" button['md:0/413349530_Level 0 – Section'] | lvl0clean "
    class="lvl0button" (click)="reveallvl1($event)" (click)="stepper.reset()" (click)="resetAllSteps()">
    {{ button['md:0/413349530_Level 0 – Section'] | lvl0clean }}
  </button>
</div>

服务：

initialisingDocs() {
  let headers = new HttpHeaders();

  headers = headers.append(
    "Authorization",
    "Basic " + btoa("SOMETHINGSOMETHING")
  );
  headers = headers.append(
    "Content-Type",
    "application/x-www-form-urlencoded"
  );
  return this.http.get(this.ROOT_URL + "initialising", { headers });
}

控制器：

constructor(private service: DocsService) {
  // Initialising the first set of buttons

  this.lvl0 = this.service.initialisingDocs().subscribe(data => {
    this.lvl0 = data;
    console.log(this.lvl0);
  });
}

下一级按钮：

reveallvl1($event) {
  this.service
    .lvl1Docs($event.target.attributes["data-param1"].value) **// <<ERROR LINE>>**
    .subscribe(data => {
      this.lvl1 = data;
      console.log(data);

      this.step1Folder($event.target.attributes["data-param1"].value);
    });
}

Answer 1

找到了一个解决方法，我没有使用 $event 对象将属性传递给函数，而是按照另一个线程中来自这里的人的建议直接迭代它们：

Angular Chrome 中的 6 个错误，函数 ($event) 随机抛出错误 "can't read property "value" of undefined"

Angular 6 bug in Chrome, function($event) randomly throws error "can't read property "value" of undefined"

debugging

google-chrome

typescript

angular

angular6