两个 ngFor 循环的角度随机播放数组元素

Question

我正在尝试构建 Angular 项目，我有两个不同的 API 新闻源。我想像这样随机显示两个 API 新闻：

• 元素新闻1
• 元素新闻2
• 元素新闻1
• 元素新闻2

但我在下面的代码中拥有的是

• 元素新闻1循环
• 元素新闻2循环

news.ts

 news_one_array:any
 news_tow_array:any

ngOnInit() {

this.news_one()
this.news_tow()
}


async news_one() {
    this.http.get("/nodes/25/iq/0/20/xlarge")
      .pipe(timeout(5000),
        catchError(err => {
          console.log(err)
          return Observable.throw("Timeout has occurred");
        })).subscribe(data => {

          this.news_one_array = data
        })

  }

  async news_tow() {
    this.http.get("/nodes/25/iq/0/21/xlarge")
      .pipe(timeout(5000),
        catchError(err => {
          console.log(err)
          return Observable.throw("Timeout has occurred");
        })).subscribe(data => {

          this.news_tow_array = data
        })

  }

HTML：

// *ngfor news 1 

<div *ngFor="let items of news_one_array; let i=index">
<p>{{items.title}}</p>
</div>

// *ngfor news 2 
<div *ngFor="let items of news_tow_array; let i=index">
<p>{{items.title}}</p>
</div>

输出：

Answer 1

您可以使用map 函数将两个数组组合成一个对象数组，如下所示。

    listA = [1, 2, 3 , 4];
    listB = ['a', 'b', 'c']
    this.combined = this.listA.map((x, i)=> {
          return {"a": x, "b": this.listB[i]}
    } );

然后在html中使用。对于不均匀的数组，使用 *ngIf 来检查 null/undefined。

<div *ngFor="let item of combined">  
    {{item.a}}
    {{item.b}}
</div>

Answer 2

在您的模板中只有一个 ngFor 循环在下面形成的新数组上：-

创建一个包含两个新闻的新数组，例如：-

public newArray = [];

    async news_one() {
        this.http.get("/nodes/25/iq/0/20/xlarge")
          .pipe(timeout(5000),
            catchError(err => {
              console.log(err)
              return Observable.throw("Timeout has occurred");
            })).subscribe(data => {

              this.news_one_array = data
              this.newsArray = [...this.news_one_arraynewsArray, ...data];
              //shuffle array here
            })

      }

      async news_tow() {
        this.http.get("/nodes/25/iq/0/21/xlarge")
          .pipe(timeout(5000),
            catchError(err => {
              console.log(err)
              return Observable.throw("Timeout has occurred");
            })).subscribe(data => {

              this.news_tow_array = data
              this.newsArray = [...this.news_one_array];newsArray, ...data];
              //shuffle array here
            })

      }

然后打乱这个数组。要知道如何洗牌。在下面的链接上找到方法：-

How to randomize (shuffle) a JavaScript array?

从上面的链接中选择了随机播放功能：-

public shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

应该像这样使用

this.newsArray = this.shuffle(this.newsArray);