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，则最终效果会很好。我整个星期都没有进行故障排除的运气，而且我似乎无法从头开始有效地进行繁殖。

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

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

Answer 1

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

无论您要迭代哪个数组，都将查询参数字段添加到数组中的对象。

这里有个例子

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

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

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

1 个答案: