Angular:访问函数中的变量

Angular: Accessing Variables in a Function

提问人:brandoncluff 提问时间:11/3/2023 最后编辑:brandoncluff 更新时间:11/3/2023 访问量:53

问:

我不确定如何从 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 秒更改一次帧,以使其中一个角色闪烁。到目前为止,这是我的组件:enter image description here

非常感谢帮助!

HTML 角度 scss-lint

评论

0赞 Eliseo 11/3/2023
请使用 或 .Angular 将您的资产文件夹复制到 index.html 所在的文件夹中。认为 Angular 与你的文件夹资产与组件所在的文件夹的相对方向无关紧要。src="./assets/FC_Frame_0.png"src="assets/FC_Frame_0.png"

答:

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 函数需要是此类的一部分,如果不是,那么您将编写代码来同步值。如果你在我的演示中看到是一个类方法HomeComponentblink
0赞 brandoncluff 11/3/2023
这是完全正确的。我被语法绊倒了。