<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 关注
- 64 浏览
添加回答
举报
0/150
提交
取消