Angular 11+项目使用lightGallery动态设置data-src属性报错如何解决？

问题原因 #

Angular 默认会将模板中的绑定识别为 DOM 属性（Property）绑定，<a> 标签原生不存在 src 对应的 DOM 属性，而 data-src 属于自定义的 HTML 特性（Attribute），直接使用插值语法绑定会触发识别错误。

解决方案 #

绑定 data-* 开头的自定义特性时，需要添加 attr. 前缀，显式告知 Angular 你要绑定的是 HTML 特性而非 DOM 属性。如果后续需要将 data-lg-size、data-sub-html 也改为动态值，同样需要使用 [attr.data-lg-size]、[attr.data-sub-html] 的语法绑定。

修改后的代码如下：

<lightgallery [settings]="settings">
  <a *ngFor="let image of images" data-lg-size="480-475-480, 800-791-800, 1406-1390" class="gallery-item"
    [attr.data-src]="image.src" [attr.data-responsive]="image.responsive" data-sub-html="Photo">
    <img class="img-responsive"
      [src]="image.thumbnail" />
  </a>
</lightgallery>

内容的提问来源于stack exchange，提问作者Vytautas Arminas