0

也许只是一个“时尚”,但仍然......

我有以下工作:

// Template
<div *ngFor="let media of period.media">
    .
    .
    .
    <button #btn (click)="onDeleteClick(btn)" [attr.media-id]="media.ID">
        {{'DELETE' | translate}}
    </button>
</div>

//component.ts
    this.period.media = [
        {id: 123}, {id: 456}, ...
    ];
    .
    .
    .
    onDeleteClick(elem) {
        console.log(elem._elementRef.nativeElement.getAttribute('media-id'));
    }

它可以工作 ( the console shows 123, 456,...),但使用 _elemntRef 访问 nativeElelement 听起来像一个 hack(下划线表示私有属性,如 _privateVar,不是吗)。

那么访问 nativeElement 或者甚至更好的 'media-id' 属性的更优雅的方法是什么?

非常感谢任何提示。

编辑

这个问题的答案在user184994JB Nizet的评论中。由于他们都正确解决了问题,我无法设置“已接受答案”标志,因为它只能分配一次。

因此,我正在编辑我的问题以确认这一点。

4

1 回答 1

1

答案已经给出,但我想再补充一点并回答。您正在使用按钮,对于大多数浏览器,按钮的默认类型是提交。如果尝试删除它将被提交 ,如果您不想要它,您可以将其类型更改为type = "button".

<div *ngFor="let media of period.media">
    <button type = "button" #btn 
  (click)="onDeleteClick(media)"
   [attr.media-id]="media.ID">{{'DELETE' | translate}}</button>
</div>

另外,如果您愿意,您可以只在需要或想要的情况下传递 id ,就onDeleteClick(media.id) 性能而言,使用它会更好。如果不需要,可以删除模板变量。
//组件.ts

this.period.media = [
    {id: 123}, {id: 456}, ...
];
.
.
.
onDeleteClick(media) {
    console.log(media.id);
}

如果您只传递 id 则需要更改语法

  onDeleteClick(id) {
        console.log(id);

    }
于 2018-05-28T06:03:50.860 回答