Angular 6 个属性绑定错误，可能的解决方法？

Question

我有一系列由 ngFor 创建的按钮，它们都绑定了自定义属性，如下所示：

[attr.queryParam1]="button['something'] | clean"
(click)="next($event)"

然后在控制器中：

this.service.lvl1Docs($event.target.attributes["queryParam1"].value).subscribe

但在 chrome 中，我的行为非常不一致，来源似乎显示属性在那里并且是正确的，但是如果我单击它们，我会在控制台中收到此错误并且没有任何反应：

ERROR TypeError: Cannot read property 'value' of undefined
at DocsBuilderComponent.push../src/app/docs-builder
/docs-builder.component.ts.DocsBuilderComponent.reveallvl1

虽然在 firefox 中似乎一切正常，但如果我继续单击 chrome，它最终会正常工作。我整个星期都没有解决这个问题，而且我似乎无法从头开始有效地重现。

我的问题是，是否有 better/different 绑定这两者的方法，以便我可以将该迭代属性作为 GET 请求参数发送？

我应该提一下，稍后我需要为每个按钮使用大约 5 个参数，并且不能绑定到 'value' 或 'id' 之类的东西，因此尝试使用属性绑定。

Answer 1

在 *ngFor 中，您可以访问正在循环的所有项目。那么，如果您只需要属性可能包含或可能不包含的数据，为什么还要向按钮添加属性。

无论您迭代的是什么数组，将查询参数字段添加到数组中的对象。

举个例子

<button *ngFor="let item of items" (click)="next(item.queryParamsOrWhatever)">
  {{item.buttonName}}
</button>

这是否回答了您的问题？或者是他们出于某种原因需要向按钮添加属性。

Angular 6 个属性绑定错误，可能的解决方法？

Angular 6 attribute binding bug, possible workarounds?

debugging

attributes

ngfor

angular