Question

从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的详细信息，但未在主屏幕上显示。

Answer 1

尝试将代码放入ngOnInit

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

并通过进行验证

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

您的*ngFor不能工作，因为它不是数组

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

Answer 2

让我们看看问题出在哪里：

第一，您试图获取dataItem的长度，但它不是数组。如果要检查长度，请确保像这样dataItem = []

初始化dataItem

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

第二，您尝试在dateItem不是数组时对其进行迭代（循环）。如果您按照上面的第一个项目符号进行初始化，则可以这样做

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

如果您修复了这些问题，便可以在模板中查看数据

查看此示例https://stackoverflow-55772639.stackblitz.io

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

2 个答案: