如何在ngAfterViewInit之后更改PrimeNG的p-card组件的背景？

Question

我想在初始化视图后更新 p 卡（PrimeNG 组件）的背景。

我的真实需求： 我在 p 卡中有一个图像，我想检索图像的主色并将其设置为 p 卡组件的背景颜色

.html 侧：

<p-card [style]="{'background': dominantColor}">
  <img src="path_to/image.png" #image />
</p-card>

.ts方：

  @ViewChild('image') imageElement: ElementRef | undefined;
  dominantColor: string = '#000000';

ngAfterViewInit(): void {
    const img = this.imageElement!.nativeElement;

    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx!.drawImage(img, 0, 0, img.width, img.height);
      const imageData = ctx!.getImageData(0, 0, img.width, img.height);
      const data = imageData.data;

      let red = 0;
      let green = 0;
      let blue = 0;

      for (let i = 0; i < data.length; i += 4) {
        red += data[i];
        green += data[i + 1];
        blue += data[i + 2];
      }

      red = Math.round(red / (data.length / 4));
      green = Math.round(green / (data.length / 4));
      blue = Math.round(blue / (data.length / 4));

      this.dominantColor = this.rgbToHex(red, green, blue);
    };
  }

  rgbToHex(r: number, g: number, b: number): string {
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  }

不幸的是，只考虑默认值，而不考虑获得的新值...

我已经看过这个话题了：
如何为primeng的p卡动态分配背景样式？
并尝试了解决方案但没有成功，并且由于我的需求有点具体，所以我冒昧地提出了这个问题 预先感谢您的帮助

Answer 1

如您所见，您将一个对象作为样式传递给 primeNg。这是正确的选择，因为 primeNG 需要对象。问题在于变化检测。您更改传递对象的属性，但不更改对象本身，因此不会触发更改检测，并且颜色不会更改。只需将

dominantColor: string = '#000000';

更改为

cardStyle = {dominantColor: '#000000'};

，然后在

this.dominantColor = this.rgbToHex(red, green, blue);

上使用

this.cardStyle = {dominantColor: this.rgbToHex(red, green, blue)};

。 .html 中的

[style]="{'background': dominantColor}"

替换为

[style]="cardStyle"

。现在问题可能已经解决了。