<div *ngFor="let link of links; let i = index;">
<p>{{link.full}}</p>
<button [id]='i' (click)="copyToClipboard(copy) ">Copy</button>
</div>如何訪問打字稿文件中的 [id]="i"
1 回答
明月笑刀無情
TA貢獻1828條經驗 獲得超4個贊
看看這個演示：
[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]
倚天杖
TA貢獻1828條經驗 獲得超3個贊
您不需要添加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
}
- 1 回答
- 0 關注
- 138 瀏覽
添加回答
舉報
0/150
提交
取消