如何使用angular访问HTML元素的动态生成的id

Question

<div *ngFor="let link of links; let i = index;"> <p>{{link.full}}</p> <button [id]='i' (click)="copyToClipboard(copy) ">Copy</button> </div> 如何访问typescript文件中的[id]="I">

Answer 1

看看这个演示：

[https://stackblitz.com/edit/angular-irxzeg?file=src%2Fapp%2Fapp.component.ts]

其中包括来自@Sam Herrmann 的建议

使用Renderer，添加类

[https://stackblitz.com/edit/angular-mjvvp1?file=src%2Fapp%2Fapp.component.ts]

Answer 2

您不需要添加id或"手动"更改按钮的标签。

您可以在现有模型中添加一个标志来了解链接是否已复制。例如：

export type Link = {
full: string,
copied: boolean
} 

然后，在您的代码中，您可以将此标志设置为true:

copyToClipboard(link: Link) {
link.copied = true;
...
}

在模板中，只需使用此标志来调整按钮的标签，并在按钮(或其他地方(上设置特定的类：

<div *ngFor="let link of links">
<p>{{link.full}}</p>
<button (click)="copyToClipboard(link)" [class.copied]="link.copied">
{{ link.copied ? 'Copied' : 'Copy' }}</button>
</div>

.copied {
background-color: green
}