for 循环中的代码在 ngOnInt() 中不起作用

Posted 2023-03-13

【中文标题】for 循环中的代码在 ngOnInt() 中不起作用

【英文标题】：Code inside for loop don't work inside ngOnInt()

【发布时间】：2021-05-04 05:35:53

【问题描述】：

我在 ng OnInit 中运行 for 循环时遇到问题，我有一个包含方法 getAllNews() 的服务，它返回一个 arrya 而不是可观察的我提到这个是为了让你知道我不能使用 subscribe()方法，所以当我控制台记录这个获取所有新闻时，它会为我显示数组，所以数组不是空的，但是当我尝试在这个数组中循环时，即使是简单的 console.log()，循环也没有任何作用，我尝试使用 for和 Foreach()，我想我错过了一些非常简单的东西，但我不知道出了什么问题，因为我是 angular 新手。这是我的 component.ts 文件：

 import  Component, OnInit  from '@angular/core';
 import  ActivatedRoute, Router  from '@angular/router';
 import  element  from 'protractor';
 import  CovidService  from '../covid.service';
 import  News  from '../models/news.model';

@Component(
  selector: 'app-inside-news',
   templateUrl: './inside-news.component.html',
    styleUrls: ['./inside-news.component.css']
   )
   export class InsideNewsComponent implements OnInit 

    getAllNews: any[] = []
    currentNews: News = new News(new Date,"","","","") ;
    current: any ; 

    constructor(private covidService : CovidService , private route : ActivatedRoute , private router 
         : Router)  

    ngOnInit(): void 



   this.current = this.route.snapshot.paramMap.get('title') ;
    this.getAllNews = this.covidService.getAllNews()
    console.log(this.getAllNews)
    for(var element in this.getAllNews)

  console.log(this.getAllNews[element])
  
    


    



       

我也尝试过这种方式，但我有同样的问题，函数中的第一个控制台日志显示一个完整的数组，其中包含我的数据，但循环内的第二个 console.log 不起作用：

 import  Component, OnInit  from '@angular/core';
 import  ActivatedRoute, Router  from '@angular/router';
 import  element  from 'protractor';
 import  CovidService  from '../covid.service';
 import  News  from '../models/news.model';

@Component(
 selector: 'app-inside-news',
 templateUrl: './inside-news.component.html',
 styleUrls: ['./inside-news.component.css'] 
)
  export class InsideNewsComponent implements OnInit 

  getAllNews: any[] = []
  currentNews: News = new News(new Date,"","","","") ;
  current: any ; 

   constructor(private covidService : CovidService , private route : ActivatedRoute , private router 
   : Router)  

   ngOnInit(): void 



     this.getCurrentNews() ; 




   

getCurrentNews() 
this.current = this.route.snapshot.paramMap.get('title') ;
this.getAllNews = this.covidService.getAllNews()
console.log(this.getAllNews)
for(var element in this.getAllNews)

  console.log(this.getAllNews[element])
 
 
 


  
 

这是我在控制台记录 getAllNews() 时获取并尝试循环的数组

getAllNews array

这是服务中的功能

 getAllNews()
let news =  firebase.firestore().collectionGroup("news") ; 
let newsData : any[] = [] ;
let test : any ;  
news.get().then((querySnapshot)=> querySnapshot.docs.forEach( element =>  
 newsData.push(element.data()))) ;
  // console.log(newsData)
   return newsData ;   
   
    

【问题讨论】：

能否分享完整代码

getAllNews() 可能是异步的或返回Observable<T>？那么您将不得不 await 异步或 subscribe 到 Observable<>

getAllNews() 正在返回一个数组，我在我的问题中加入了这个数组图像

【参考方案1】：

实际数据的工作示例

这是一个使用角度数组的示例。如果你的数组中有一个值列表，这将 100% 有效。

请参考附图。Updated the logics with actual data

【讨论】：

我在帖子中加入了我的阵列图像

用实际数据更新了答案。我只是复制对象。

【参考方案2】：

我认为您试图以错误的方式访问数组。请尝试下面的代码=>

ngOnInit(): void 
     for(let news of this.getAllNews)
       console.log(news.Info);//Here Info I presume as a property.
     
   

或

ngOnInit(): void 
         for(let news in this.getAllNews)
           console.log(this.getAllNews[news].Info);//Here Info I presume as a property.
         
       

注意：请检查并尝试并告诉我。

【讨论】：

我也有同样的问题

我的代码运行正常。你到底是什么问题？

即使是简单的console.log("Test")，for循环内部也没有任何作用的问题

请查看链接StackBlitz LINK。我的代码在那里工作。请检查并告诉我。

它在 StackBlintz 上运行良好我加入了在我的服务中返回数组的方法，即使我不这么认为，问题仍然存在，因为 console.log(getAllNews) 显示数组所以我的服务方法返回一个完整的数组