Question

我正在尝试创建一个HTML标记，该标记将循环遍历单词数组，一次显示一个单词，但每n秒更改一次。

例如，假设我有一个["one", "two", "three"]数组和一个span标签。 span标签的文本将为one n秒钟，然后更改为two，然后更改为three，然后更改为one，依此类推...

到目前为止，这是我的尝试：

我的app.component.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html',
})

export class AppComponent implements OnInit {
  ngOnInit() {
    this.changeName();
  } 

  words: string[] = [
    "one",
    "two",
    "three"
  ];

  Wording: string = this.words[0];

  changeName():void {
    this.words.unshift(this.words[this.words.length - 1]);
    this.words.pop();
    this.Wording = this.words[0]
    var x = 5;  

    setTimeout(this.changeName, x*1000);
  }
}

app.component.html：

<span id="text-change">{{ Wording }}</span>

上述实现不会更改span标记中的文本，并且会出现错误，指出words变量未定义：

ERROR TypeError: Cannot read property 'unshift' of undefined
    at push../src/app/header/header.component.ts.HeaderComponent.changeName (header.component.ts:24)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3645)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

所以我的问题是： 1）首先；有一个更好的方法吗？ 2）为什么words变量“消失”了？

Answer 1

使用Observables对您来说将是一个更简单的选择。下面的方法会起作用，并且最终会更清洁。

private words: string[] = ['foo', 'bar', 'baz'];

rotateWords() {
  const source = Rx.Observable.interval(1000).take(this.words.length);
  const sub = source.finally(this.rotateWords).subscribe(i => console.log(this.words[i]));  
}

Answer 2

可以使用setInterval和类似的逻辑

changeName():void { 

  if(count === this.words.length){
    count = 0
  }
  this.Wording = this.words[count++] 
}

var x = 5; 
var count = 0;
setInterval(this.changeName, x*1000);

演示

function changeName() { 
    
      if(count === words.length){
        count = 0
      }
      console.log(words[count++]) 
 }
  var words = [
    "one",
    "two",
    "three"
  ];
    var x = 5; 
    var count = 0;
    setInterval(changeName, x*1000);

Answer 3

2）数组一词消失了，因为您使用的是pop方法，该方法从数组中删除了元素。 Documentation here。

1）我认为，实现此目标的更好方法是自己使用和维护索引，例如：

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-app',
    styleUrls: ['./app.component.scss'],
    templateUrl: './app.component.html',
})

export class AppComponent implements OnInit {
    ngOnInit() {
        this.changeName(0);
    } 

    words: string[] = [
        "one",
        "two",
        "three"
    ];

    var x = 5;

    Wording: string = this.words[0];

    changeName(index):void {
        this.Wording = this.words[index++];

        if (index == this.words.length) {
            index = 0;
        }

        return setTimeout(function () {
            this.changeName(index)
        }, x*1000);
    }
}

Answer 4

在您的ts文件中：

    words:any[]=["one", "two", "three"];

    word:string="";
    currentIdx:number =0;
    x=5;

    ngOnInit(){
      setInterval(()=>{
        this.rotateWords()
      },this.x*1000)
      }

  rotateWords(){

    if(this.currentIdx>=this.words.length){
      this.currentIdx=0;
    }

          this.word=this.words[this.currentIdx];
          this.currentIdx++
  }

在您的html中：

<p>{{word}}</p>

循环浏览文字

4 个答案: