我創建了這個滑塊
作業鏈接： https ://stackblitz.com/edit/angular-ivy-gcgxgh?file=src/app/app.component.ts,src/app/app.component.html
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>
單擊下一個按鈕時出現此錯誤：
ERROR 錯誤：無法讀取未定義的屬性（正在讀取“類名”）
任何在滑塊內呼叫子組件并修復錯誤的解決方案，謝謝
uj5u.com熱心網友回復：
你的 stackbitz 上有這個代碼：
var dots = this.elem.nativeElement.querySelectorAll('.dot');
并且您的模板中沒有帶有“點”類的元素。
所以當你這樣做時：
dots[this.slideIndex - 1].className = ' active';
的dots[this.slideIndex - 1]值為undefined;
然后這會給你錯誤
無法讀取未定義的屬性（讀取“類名”）
為了解決這個問題，我的建議是你永遠不要querySelectorAll在你的任何角度代碼中使用 a ...
我會假設你的實際組件中有一個變數，它是某種陣列，它使用這個“點”類生成元素。所以當點擊按鈕時，你應該操作這個陣列變數，而不是在模板上查詢它的結果。
理想的角流是
- 修改組件中的資料
- 所有受影響的模板都已更新
希望這可以幫助您進步！
uj5u.com熱心網友回復：
Angular 不僅僅是 javascript。您應該重新考慮使用變數的輪播，并[class.active]="variable"更改類和模板參考變數，并@ViewChildren()在必要時獲取 nativeElements。
Disclamer：這只是一個未完成的（并且可能是錯誤的），例如在 .html 中使用的 .ts 中使用的變數使得使用 document.querySelectorAll 和 className.replace 的“javascript 樣式”更加“可讀”和“友好的角度”
簡而言之，如果你有，例如一些喜歡
<div #slide class="mySlides animated fadeInRight" [ngClass]="className[0]">
Slide 1
</div>
<div #slide class="mySlides animated fadeInRight" [ngClass]="className[1]">
Slide 2
</div>
你可以定義一些像
@ViewChildren('slide') slides:QueryList<ElementRef>
className:string[]=[]
selectedIndex:number=0;
并使用一些喜歡
slides.forEach((x,index)=>{
this.className[index]=index==selectedIndex?'block active'
:'none'
})
使用 .css 之類的
.active{...}
.none{display:none}
.block{display:block}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/491141.html
標籤：javascript 有角度的 打字稿