所以我在邏輯上遇到了一些問題來顯示或隱藏元素。
我有這個功能來顯示或隱藏“span”元素，這樣我可以在每個文本上顯示不同的顏色。
startWritting() {
// const spanOne = <HTMLInputElement>document.getElementById('one');
// const spanTwo = <HTMLInputElement>document.getElementById('two');
// const spanThree = <HTMLInputElement>document.getElementById('three');
// const spanFour = <HTMLInputElement>document.getElementById('four');
const durCharFwd = 0.1; // character typed
const durFullGap = 2000; // time between typed/delete
const durCharBwd = 0.8; // character deleted
const durDoneGap = 1000;
let strings = ['Your value', 'Organic', 'Gluteen-free', 'Fair-trade'];
let durTotal;
setInterval(() => {
strings.forEach((string, i) => {
durTotal =
string.length * (durCharFwd durCharBwd) durFullGap durDoneGap;
setInterval(() => {
this.elements.forEach((el, index) => {
if (index === i) {
el.isSelected = true;
} else {
el.isSelected = false;
}
});
}, durTotal);
});
}, durTotal);
}
這是我的 HTML 代碼
<ng-container *ngFor="let el of elements">
<span
*ngIf="el.isSelected"
[id]="el.id"
class="animated-text"
></span>
</ng-container>
順便說一句，這是在打字影片上編輯元素，因為您可以在此處查看完整的 html 和 css 影片代碼 https://codepen.io/matadantelinga/pen/ExQeqjj 我想知道這里是否有人可以就邏輯給我建議？
uj5u.com熱心網友回復：
類似的東西有幫助嗎？
https://stackblitz.com/edit/angular-ivy-cr9lq4?file=src/app/app.component.html,src/app/app.component.ts,src/app/app.component.css
export class AppComponent {
name = 'Angular ' VERSION.major;
text = '';
color = '';
texts = ['One', 'Two', 'Three', 'Four'];
colors = ['cyan', 'lightgreen', 'salmon', 'coral'];
constructor(private cdRef: ChangeDetectorRef) {}
ngOnInit() {
timer(0, 500)
.pipe(map((i) => i % 4))
.subscribe((i) => {
this.text = this.texts[i];
this.color = this.colors[i];
this.cdRef.detectChanges();
});
}
}
編輯將打字機添加到 stackblitz
https://stackblitz.com/edit/angular-ivy-cr9lq4?file=src/app/app.component.html,src/app/app.component.ts,src/app/app.component.css
uj5u.com熱心網友回復：
只需宣告一個陣列顏色
colors=['red','blue','yellow','green']
只需添加[style.color]="colors[i%colors.length]"
<ng-container *ngFor="let el of elements;let i=index">
<span *ngIf="el.isSelected"
[style.color]="colors[i%colors.length]"
[id]="el.id"
class="animated-text"
></span>
</ng-container>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/489191.html