使用 httpClient 离子加载远程 json

Question

我是 Angular 新手，我想从 API 获取数据：https://randomuser.me/

我尝试了很多教程和方法，但我无法将数据加载到其他 json 中。

export class TreeComponent {

   text: string;
   public items;
   test:string;

   data;

   constructor(public http: HttpClient) {

   this.text = 'Hello World work in progress !';

   this.items = [{
       gender: '',
       name: {
         title:'',
         first:'',
         last:''
       },
       picture: {
          large: ''
       }
      }]

   this.loadData();

   loadData(){
      this.http.get('https://randomuser.me/api/')
        .subscribe((data: Config) =>  {

        this.items = data["results"];

        console.log(this.items.gender)
      });
  }
}

我正在尝试填充我的 items 变量，它适用于 html 文件：

<div>

<ion-list>
  <ion-item *ngFor="let item of items">
      {{item.gender}} <br>
    {{item.name.title}} <br>
    {{item.name.first}} <br>
    {{item.name.last}} <br>
    <img src="{{item.picture.large}}" alt="portrait ">

  </ion-item>
</ion-list>

我的页面上有姓名、性别和标题，但是当我尝试在我的代码中使用我的变量项时，例如：

this.data = {
  name: items.name.first,
  designation: "bar",
  subordinates: []
}

我有一个错误说 items.name.first 是未定义的。我不知道我做错了什么。我已经尝试了很多方法（使用承诺、观察者......），但我没有找到解决方法。

console.log(data["results"]) ：

Array(1)
0:
cell: "(141)-248-3533"
dob: {date: "1977-06-02T18:28:35Z", age: 41}
email: "emily.lewis@example.com"
gender: "female"
id: {name: "", value: null}
location: {street: "6842 saint aubyn street", city: "blenheim", state:"taranaki", postcode: 36604, coordinates: {…}, …}
login: {uuid: "471aac1b-413c-4e60-9ac8-4192837ac253", username:"orangefish205", password: "samuel", salt: "foX3yaYP", md5:"30b244b9b722d02557c6243e9bdb48fc", …}
name: {title: "miss", first: "emily", last: "lewis"}
nat: "NZ"
phone: "(146)-713-2070"
picture: {large: "https://randomuser.me/api/portraits/women/52.jpg", 
          medium: "https://randomuser.me/api/portraits/med/women/52.jpg", 
          thumbnail: "https://randomuser.me/api/portraits/thumb/women/52.jpg"}
registered: {date: "2004-04-20T09:57:48Z", age: 14}

原型：对象 长度：1 原型：数组（0）

在我的构造函数中，我想将 API 中的名称影响到我的变量数据：

 constructor(public http: HttpClient) {

    this.text = 'Hello World work in progress !';

    this.items = [
         {gender: '',
         name: {
           title:'',
           first:'',
           last:''
          },
         picture: {
          large: ''
        }
     }]

this.loadData();

  console.log(this.items[0].name.first)
  this.data = {
     name: this.items[0].name.first,
     designation: "bar",
     subordinates: []
    }
 }

Answer 1

你得到一个数组，改为这样做：

console.log(this.items[0].gender);

并填充您所做的“数据”属性：

this.data = {
     name: this.items[0].name.first,
     gender: this.items[0].gender,
     picture: this.items[0].picture.medium
}

根据您在响应中看到的图像大小而定的图片位置