Question

我有一个以html模板显示的数据列表。

<div>
   <a (click)='onClick(this)' someproperty='test'></a>
   <a (click)='onClick(this)' someproperty='test'></a>
   <a (click)='onClick(this)' someproperty='test'></a>
   <a (click)='onClick(this)' someproperty='test'></a>
</div>

每当我点击一个项目时，我想动态更改一个属性。但是，Angular将对象显示为未定义。

这是我的组件：

declare var $:any;
export class MyComponent {
  onClick(someobject): void {
    $(someobject).attr('someproperty','dontTest');//console shows "Undefined"

  }
}

Answer 1

尝试以下，

 <a (click)='onClick($event)' someproperty='test'>click me</a>

 onClick(someobject): void {
    someobject.target.attributes['someproperty'].value = "donttest";
    console.log(someobject.target.attributes['someproperty'].value);
  }

以下是Plunker!!

希望这会有所帮助!!

Answer 2

您可以通过模板

完成所有操作

请参阅Attribute Binding文档。

<div>
   <a (click)="val1 = 'new val 1'" [attr.someproperty]="val1">Link 1</a>
   <a (click)="val2 = 'new val 2'" [attr.someproperty]="val2">Link 2</a>
   <a (click)="val3 = 'new val 3'" [attr.someproperty]="val3">Link 3</a>
</div>

这里是plunker

只需检查链接并点击它即可查看 someproperty 更改。

如何在Angular 2中的事件处理程序中传递html元素属性/属性？

2 个答案: