单击时如何将样式和文本仅应用于一个按钮而不是 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

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

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

现在数组中的每个对象都有两个新的properties.Apply它到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);
}

Answer 2

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

<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 中添加以下内容 class :

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

这是一个工作示例：

Working demo

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

How to apply styles and text to only one button when clicked instead of all buttons in Angular 10

javascript

html

arrays

angular

ngfor