无涯教程网

Angular AOS中的数据绑定可能吗

发布于01月08日

我在我的Angular 弹射体中使用了Scroll上的动画，我有一堆图像，我想一个接一个地展示.

 <div class="img-gallery">
        <div *ngFor="let imgSrc of images" data-aos="zoom-in">
            <img [src]="imgSrc">
        </div>
    </div>

我想添加每个包装器div data-aos-delay指令，如下所示

<div *ngFor="let imgSrc of images; let i = index" data-aos="zoom-in" [data-aos-delay]="i * 100">
    <img [src]="imgSrc">
</div>

但是，意料之中的是，它向我展示了错误

无法绑定到‘data-AOS-Delay’，因为它不是‘div’的已知属性

不管怎样，我怎么才能实现它呢？任何实施都将被感激地接受

推荐答案

你能把它改成下面的吗？

你在index上也有一个打字错误

<div *ngFor="let imgSrc of images; let i = index" data-aos="zoom-in" data-aos-delay="{{i * 100}}">
    <img [src]="imgSrc">
</div>

您也可以这样做

<div *ngFor="let imgSrc of images; let i = index" data-aos="zoom-in" [attr.data-aos-delay]="i * 100">
    <img [src]="imgSrc">
</div>

Angular相关问答推荐

如何在Angular模块中的forRoot中注入配置

Angular 动画—淡出适用于DIV，不完全适用于子组件

以Angular 表示显示特殊字符

TransLoco合并本地和服务器端转换对象

Rxjs重置执行后的可观察延迟并重新调度Angular

如何包装NGB carousel ？

仅在展示时使用垫式步进器

带信号数据源的17角material 表

从API动态加载MAT表数据时禁用分页

MonoTypeOperatorFunction不可分配给OperatorFunction类型的参数

Angular-每2个流式传输多个HTTP调用

大型 Angular 12 应用程序 - 我如何管理 js 文件

Angular 13 - 使用 PUT 时出现 400 错误(错误请求)

如何在插值中编写条件？

Angular 没有可用于依赖类型的模块工厂：ContextElementDependency

在同一个组件中使用 MatSort 的多个 mat-table

Angular CLI 输出 - 如何分析Bundle 文件

Angular 2：组件交互，可选输入参数

如何在 Angular 4 中翻译 mat-paginator？

如何将从后端渲染的参数传递给angular2 bootstrap 方法

实用课程推荐

相关教程推荐