如何使用 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>如何访问打字稿文件中的 [id]="i"

Answer 1

看看这个演示：[https://stackblitz.com/edit/angular-irxzeg?file=src%2Fapp%2Fapp.component.ts]其中包括来自 @Sam Herrmann 的建议并使用Renderer，添加Class[https://stackblitz.com/edit/angular-mjvvp1?file=src%2Fapp%2Fapp.component.ts]

Answer 2

您不需要添加id或 来“手动”更改按钮的标签。您可以在现有模型中添加一个标志来了解链接是否已被复制。例如：export type Link = {&nbsp; full: string,&nbsp; copied: boolean}&nbsp;然后，在您的代码中，您可以将此标志设置为true：copyToClipboard(link: Link) {&nbsp; link.copied = true;&nbsp; ...}在模板中，只需使用此标志来调整按钮的标签，并在按钮（或其他地方）上设置特定的类：<div *ngFor="let link of links">&nbsp; <p>{{link.full}}</p>&nbsp; <button (click)="copyToClipboard(link)" [class.copied]="link.copied">&nbsp; &nbsp; {{ link.copied ? 'Copied' : 'Copy' }}</button></div>.copied {&nbsp; background-color: green}