Как получить доступ к динамически генерируемому идентификатору элемента HTML с помощью angular

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, добавить класс

[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;
  ...
}

В шаблоне просто используйте этот флаг, чтобы адаптировать метку кнопки, а также установить определенный c класс для кнопки (или в другом месте):

<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
}