提问人:brandoncluff 提问时间:11/3/2023 最后编辑:brandoncluff 更新时间:11/3/2023 访问量:53
Angular:访问函数中的变量
Angular: Accessing Variables in a Function
问:
我不确定如何从 Angular 中的函数访问“this”。
这是我的HTML
<img id="castle_frame_0" [ngClass]="this.frame == 0 ? 'show' : 'hide'" src="../../assets/FC_Frame_0.png">
<img id="castle_frame_1" [ngClass]="this.frame == 1 ? 'show' : 'hide'" src="../../assets/FC_Frame_1.png">
<img id="castle_frame_2" [ngClass]="this.frame == 2 ? 'show' : 'hide'" src="../../assets/FC_Frame_2.png">
<img id="castle_frame_3" [ngClass]="this.frame == 3 ? 'show' : 'hide'" src="../../assets/FC_Frame_3.png">
<img id="castle_frame_4" [ngClass]="this.frame == 4 ? 'show' : 'hide'" src="../../assets/FC_Frame_4.png">
<img id="castle_frame_5" [ngClass]="this.frame == 5 ? 'show' : 'hide'" src="../../assets/FC_Frame_5.png">
我基本上是在尝试每 X 秒更改一次帧,以使其中一个角色闪烁。到目前为止,这是我的组件:
非常感谢帮助!
答:
1赞
Manish
11/3/2023
#1
这基本上是你所描述的方法,你只需要把它放到你的代码中。以下是您可以做到这一点的一种方法
export class HomeComponent implements OnInit {
frame = 0;
refresh = 2000;
maxFrames = 5;
constructor() {
setInterval(() => {
this.blink()
}, this.refresh); // will call the blink function after every 2 seconds
}
ngOnInit() {
this.frame = 1;
console.log(this.frame);
}
blink() {
// If frame is 0 then set it to some other number between 1 and 5 else set it back to 0;
this.frame = this.frame === 0 ? this.getRandom(1, this.maxFrames) : 0;
}
getRandom(min: number, max: number){
return Math.floor(Math.random() * (max - min + 1) + min);
}
}
每 2 秒后,它将变为 0 并保持 0 2 秒,然后变为 1-5 之间的随机数并保持 2 秒。
这是一个 Stackblitz 演示,您可以在其中使用此代码并查看其实际操作
评论
0赞
brandoncluff
11/3/2023
感谢您提供此解决方案。我现在有范围问题......我认为?我无法从眨眼访问“this.frame”。如果可以的话,我可能不需要在 StackOverflow 上发帖。现在我正在搞砸常量变量......但没有运气。
0赞
brandoncluff
11/3/2023
尝试访问“this.frame”时出现的具体错误如下:“'this'隐式具有类型'any',因为它没有类型annotation.ts(2683) home.component.ts(23, 10):'this'的外部值被此容器遮蔽。
1赞
Manish
11/3/2023
blink 函数需要是此类的一部分,如果不是,那么您将编写代码来同步值。如果你在我的演示中看到是一个类方法HomeComponent
blink
0赞
brandoncluff
11/3/2023
这是完全正确的。我被语法绊倒了。
评论
src="./assets/FC_Frame_0.png"
src="assets/FC_Frame_0.png"