单击时如何将样式和文本应用于仅一个按钮而不是Angular 10中的所有按钮

Question

所以我有一个链接数组，每个链接都有一个复制按钮，用于将文本复制到剪贴板。单击时，“复制”按钮应该将其内部文本更改为“已复制！”并且在超时将其恢复为原始状态之前，颜色也会发生变化。

问题是当我单击一个按钮时，样式和 innerText 将应用于所有按钮。这是代码：

TS

  copyState = { text: 'copy', color: '' };

onClick() {
    this.copyState.text = 'Copied!';
    this.copyState.color = 'hsl(258, 40%, 30%)';

    setTimeout(() => {
      this.copyState.text = 'Copy';
      this.copyState.color = '';
    }, 5000);
  }
 

外部 API 生成链接

HTML：

  <div class="result" *ngFor="let result of Links; index as i">
    <p class="original_link">{{ result.original_link }}</p>

    <div class="new-link">
      <p>{{ result.short_link }}</p>
      <button 
        [ngStyle]="{ 'background-color': copyState.color }"
        [cdkCopyToClipboard]="result.short_link"
        (click)="onClick(i)"
      >
        {{ copyState.text }}
      </button>
    </div>

Answer 1

我认为您应该考虑另一种方法来解决这种情况。

<div class="result" *ngFor="let result of Links; index as i">
  <p class="original_link">{{ result.original_link }}</p>

  <div class="new-link">
    <p>{{ result.short_link }}</p>
    <button
      [ngClass]="{'touched': clickedLink?.short_link === result.short_link}"
      (click)="onClick(i)"
    >
      {{ (clickedLink?.short_link === result.short_link)? 'copied': 'copy' }}
    </button>
  </div>
</div>

然后在组件文件中：

 clickedLink;
  onClick(i) {
    this.clickedLink = this.Links[i];
    setTimeout(() => {
      this.clickedLink = null;
    }, 5000);
  }

并在css 中添加以下类：

.touched {
  background-color: hsl(258, 40%, 30%);
}

这是一个工作示例：

Working demo

Answer 2

问题是您没有为copyState.text 使用数组。像这样填充 Links 数组后修改它

Links.forEach(link) {
  link.copyStateColor = '';
  link.copyStateText = 'Copy';
});

现在数组中的每个对象都有两个新属性。像这样将它应用到 html，

  <div class="result" *ngFor="let result of Links; index as i">
    <p class="original_link">{{ result.original_link }}</p>

    <div class="new-link">
      <p>{{ result.[enter image description here][1]short_link }}</p>
      <button [ngStyle]="{ 'background-color': result.copyStateColor }" 
              [cdkCopyToClipboard]="result.short_link" 
              (click)="onClick(i)">[enter image description here][1]
        {{ result.copyStateText }}
      </button>
    </div>
  </div>

现在像这样调用你的函数

onClick(idx) {
  this.Links[idx].copyStateText = 'Copied!';
  this.Links[idx].copyStateColor = 'hsl(258, 40%, 30%)';

  setTimeout(() => {
    this.Links[idx].copyStateText = 'Copy';
    this.Links[idx].copyStateColor = '';
  }, 5000);
}