如何使用 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 = {

  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

}