Angular 6属性绑定错误，可能的解决方法? [英] Angular 6 attribute binding bug, possible workarounds?

问题描述

我有一系列由ngFor创建的按钮，所有按钮都具有这样的绑定自定义属性:

I have a series of button created by ngFor which all have custom attributes binded like this:

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

然后在控制器中:

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

但是在chrome浏览器中，我的行为变得非常不一致，消息源似乎显示出属性在那里并且是正确的，但是如果我单击它们，我会在控制台中看到此错误，并且什么也没有发生:

But in chrome I'm getting very inconsistent behaviour, the source seems to reveal the attributes are there and are correct but if I click them I get this error in console and nothing happens:

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

虽然一切似乎在Firefox中都可以正常工作，但是如果我继续单击chrome，则最终效果会很好.这整个星​​期我都没有进行故障排除的运气，而且我似乎无法从头开始有效地进行繁殖.

Everything seems to work fine in firefox though and if I keep clicking in chrome it eventually works fine. I had no luck troubleshooting this all week and I can't seem to effectively reproduce from scratch.

我的问题是，是否有更好/不同的方式来绑定这两者，以便我可以将迭代属性作为GET请求参数发送?

My question is, is there a better/different way to bind these two so I can send that iterated attribute as a GET request param?

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

I should mention I need to use about 5 params for each button slightly later on and can't bind to something like 'value' or 'id', hence trying to use attribute binding.

推荐答案

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

In an *ngFor you have access to all the items that are being looped over. So why add attributes to a button if you just need the data that attribute may or may not contain.

无论您要遍历哪个数组，都将查询参数字段添加到数组中的对象.

Whatever array you are iterating over, add the query param fields to the objects within the array.

这里有个例子

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

这能回答您的问题吗?还是他们需要在按钮上添加属性的某些原因.

Does this answer your question? Or is their some reason you need to add attributes to the button.

这篇关于Angular 6属性绑定错误，可能的解决方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！