Angular检测dom-to-image的变化，并无限次渲染它。

Question

我希望我在标题中有正确的想法，但我不确定。我的应用程序使用的是Angular 4，目前还不能更新。

我有一个使用*ngFor渲染子组件的组件。

每个子组件都应该为自己创建一张墙纸。为此，我使用dom- to -image，或者更准确地说是dom-to-image-more。

通过用户输入创建html元素，然后将其设置为重复的墙纸。

这对于特定数量的元素可以很好地工作，但如果我使用*ngFor动态呈现它们，就不是这样了。

请注意，下面的代码是非常静态的，一旦我解决了这个问题，应该会变得更加灵活(图像和颜色应该由用户设置)。

父级：

        <div
          class="advertise-advertise"
          *ngFor="let advertisement of getAdvertisements()"
        >
          <advertisement
            [advertisement]="advertisement"
            (reportAdvertisement)="reportAdvertise($event)"
            (contactAdvertiser)="contactAdvertise($event)"
          >
          </advertisement>
        </div>

孩子：

<div
  class="advertise-advertise-item"
  [ngStyle]="{'background-image': 'url(' + backgroundImage + ')'}"
  [ngClass]="hover ? 'hover' : ''">
  <div style="overflow: hidden;">
    <div #wallpaper class="wallpaper" style="width: 64px; height: 64px; background-color: green; opacity: 0.3; text-align: center; line-height: 64px;">
      <img height="32px" width="32px" src="/assets/images/flask-solid.png"  alt=""/>
    </div>
  </div>
  ...
</div>

子组件：

ngOnInit(): void {

const parent = this;
domtoimage.toPng(this.wallpaper.nativeElement)
  .then(function (dataUrl) {
    parent.advertisement.backgroundImage = dataUrl;
    parent.renderer.setStyle(parent.wallpaper.nativeElement, 'display', 'none');
  })
  .catch(function (error) {
    console.error('Could not render background image', error);
  });
}

我的应用程序运行到一个无限循环中，一遍又一遍地渲染图像，从而使应用程序在加载时被卡住。

我非常确定我在这里遗漏了一个重要的模式，但我自己显然无法找到解决方案。

提前感谢！

Answer 1

移除ngFor中的函数并将其替换为属性