我已经创建了此滑块

工作链接:

HTML组件:

<div class="slideshow-container">
  <ng-container>
    <div class="mySlides animated fadeInRight">Slide 1</div>
    <div class="mySlides animated fadeInRight">Slide 2</div>
  </ng-container>
</div>
<button class="btn ansbtn" (click)="plusSlides(-1)">Previous</button>
<button class="btn ansbtn" (click)="plusSlides(1)">Next</button>

我必须调用滑块内的子组件

<ng-container *ngFor="let o of list; let i=index">
<child-component-1 *ngIf="i==0"> </child-component-1>
<child-component-2 *ngIf="i==1"> </child-component-2>
..
<child-component-n *ngIf="i==n"> </child-component-n>
</ng-container>

单击"下一步"按钮时出现此错误:

错误错误:无法读取未定义的属性(读取"className")

任何调用滑块内部子组件并修复错误的解决方案,谢谢

推荐答案

您的stackbitz上有以下代码:

var dots = this.elem.nativeElement.querySelectorAll('.dot');

模板中没有带有"点"类的元素.

因此,当您这样做时:

dots[this.slideIndex - 1].className += ' active';

dots[this.slideIndex - 1]的值为undefined

这就给出了错误

无法读取未定义的属性(读取"className")

为了解决这个问题,我的建议是,你永远不要在任何Angular 代码中使用querySelectorAll...

我假设您的实际组件中有一个变量,它是某种数组,可以用这个"dot"类生成元素.

理想的角流是

  1. 修改组件中的数据
  2. 将更新所有受影响的模板

希望这能帮助你进步!

Javascript相关问答推荐

为什么剧作家在导航时会超时?

序列化我的数据并发送httpPost请求后,控制器收到空参数

如何用变量productId替换 1"

d3可排序表标题行中有收件箱--如何使收件箱不触发排序?

Python类实现的JavaScript吊坠是什么样子的?

为什么有些库公开了执行相同任务的方法,但每个方法都处于同步/同步上下文中?

JavaScript:循环访问不断变化的数组中的元素

使用CDO时如何将Vue组件存储在html之外?

不渲染具有HTML参数的React元素

无法将nPM simplex-noise包导入在JS项目中工作

React存档iframe点击行为

将json数组项转换为js中的扁平

单击更新页面的按钮后,页面刷新;测试/断言超时,有两个标题,但没有一个标题

Next.js(react)使用moment或不使用日期和时间格式

Angular material 拖放堆叠的牌副,悬停时自动展开&

如何修复(或忽略)HTML模板中的TypeScript错误?'

html + java script!需要帮助来了解为什么我得到(无效的用户名或密码)

获取Uint8ClampedArray中像素数组的宽度/高度

每次重新呈现时调用useState initialValue函数

更改agGRID/Reaction中的单元格格式