如何以角度显示从api获取的数据

Posted 2021-04-04

从api获取的数据没有显示在屏幕上，但我在控制台中获取数据。

data.service.ts

    const httpOptions = {
      headers:new HttpHeaders({'Content-Type':'application/json'})
     };

    @Injectable()

    export class DataService {

    constructor(private http: HttpClient) {}
    getuserdetails(){
    return this.http.get<any> 
    ('http://jsonplaceholder.typicode.com/users/1')
    .pipe(map(item => {
        return item;
    }));
    }
   }

information.component.ts

 export class InformationComponent implements OnInit {
    dataItem:any = {} 

    constructor(private data: DataService) {
    this.data.getuserdetails().subscribe(item=>{
    console.log(item);
    this.dataItem=item;
  });
   }

  ngOnInit() {
  }

 }

information.component.html

<div *ngIf="dataItem?.length>=0">           
 <div *ngFor='let x of dataItem'>

   {{x.name}}

 </div>
 </div>

在这里，我在控制台中获取用户1的详细信息，但它没有显示在主屏幕上。

答案

尝试将代码放入ngOnInit

ngOnInit(){
 this.data.getuserdetails().subscribe(item=>{
  console.log(item);
  this.dataItem=item;
 });
}

并通过做验证在HTML中

<div *ngIf="dataItem">
   {{dataItem |json }}
</div>

你的*ngFor不会工作，因为它不是一个阵列

我认为这应该有效。 constructor是打字稿的东西。尝试在Angular生命周期钩子中进行make API调用

另一答案

让我们看看问题是什么：

首先你试图得到dataItem的长度，而它不是一个数组。如果要检查长度，请确保像这样dataItem = []初始化dataItem

<div *ngIf="dataItem?.length>=0">           

第二，你试图迭代（循环）dateItem，而它不是一个数组。如果您按照上面第一个项目中的说明初始化它，您将被允许这样做

 <div *ngFor='let x of dataItem'>

如果您修复这些，您将能够在模板中看到数据

看看这个工作示例https://stackoverflow-55772639.stackblitz.io