两个ngFor循环的角随机排列数组元素

Question

我正在尝试构建Angular项目，我有两个不同的API新闻来源。我想随机显示两个API消息：:>

• element news 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>

我正在尝试构建Angular项目，我有两个不同的API新闻来源。我想随机显示两个API新闻：元素新闻1元素新闻2元素新闻1元素新闻2但是...

Answer 1

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

Answer 2

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