来自分页 API 的 Angular GET 请求（下一页）

Question

我需要从分页的 rest api 中检索数据 我正在使用以下代码，但无法在模板中加载信息 任何关于更好方法的建议将不胜感激！

component.ts

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  articles: any[];
  url = 'https://example.zendesk.com/api/v2/users.json';
  // finished = false;

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    this.getArticles(this.url, this.articles);
  }

  getArticles(url: string, articles: any[]) {
    this.httpClient.get(url).toPromise().then(response => {
      console.log(response['next_page']);
      if (articles === undefined) { articles = response['articles']; } else { articles = articles.concat(response['articles']); }
      console.log(articles);
      if (response['next_page'] != null) {
        this.getArticles(response['next_page'], articles);
      } else { console.log('End'); return articles; }
    });
  }

}

html

<ul *ngIf="articles">
  <li *ngFor="let article of articles">
    {{ article.title }}
  </li>
</ul>

Answer 1

我认为问题在于我需要订阅信息，现在它正在工作。 还是谢谢你:)

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  articles: any[];
  url = 'https://example.zendesk.com/api/v2/users.json';

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    this.getArticles(this.url, this.articles);
  }

  getArticles(url: string, articles: any[]) {
    this.httpClient.get(url).subscribe(data => {
      if (articles === undefined) { articles = data['articles']; } else { articles = articles.concat(data['articles']); }
      if (data['next_page'] != null) {
        this.getArticles(data['next_page'], articles);
      } else { console.log('Finished'); }
      this.articles = articles;
    });
  }

}

Answer 2

我发布的答案是初学者的一个很好的例子。

api.service.ts!!!

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Customer } from './customer';

@Injectable({
  providedIn: 'root'
})

export class ApiService {
 apiurl="https://reqres.in/api/users";

 constructor(private http:HttpClient) { }
 getConfig(){
   return this.http.get<Customer[]>(this.apiurl);
 }
}

上面服务中的getConfig()在下面的组件中被调用。 App.Component.ts!!!

    import { Component, OnInit } from '@angular/core';
    import { Customer } from './customer';
    import { ApiService } from './api.service';


    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      customers:any;
      title = 'ApiTable';
      constructor(private apiservice:ApiService){}
      ngOnInit(){
        this.customers=[];
        return this.apiservice.getConfig().subscribe(data =>this.customers = data['data']);
      }

HTML！！！

    <h3 style="color: green;text-align: center;">API CALLED DATA USING ANGULAR</h3>
    <div class="container">
    <table border="3  px" class="table table-striped table-hover">
      <thead class="thead-dark">
        <tr>
          <th>ID</th>
          <th>FIRST-NAME</th>
          <th>LAST-NAME</th>
          <th>EMAIL</th>
          <th>AVATAR</th>
        </tr>
        <tr>
          <td class="bg-primary"><input type="text" placeholder="ID" style="width:51px;"></td>
          <td class="table-secondary"><input type="text" placeholder="FIRST-NAME"style="width:155px;"></td>
          <td class="table-success"><input type="text" placeholder="LAST-NAME"style="width:155px;"></td>
          <td  class="table-warning"><input type="text" placeholder="EMAIL"style="width:155px;"></td>
          <td class="table-info"><input type="text" placeholder="AVATAR"style="width:155px;"></td>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of customers | slice:startIndex:endIndex">
          <td class="bg-primary">{{item.id}}</td>
          <td class="table-secondary">{{item.first_name}}</td>
         <td class="table-success">{{item.last_name}}</td>
          <td class="table-warning">{{item.email}}</td>
          <td class="table-info"><img src="{{item.avatar}}"></td>
        </tr>
      </tbody>
    </table>
    </div>
    <router-outlet></router-outlet>

Answer 3

如果没有 Igor 询问的更多信息，我认为您做错了什么是在 getArticles(url: string, articles: any[]) 函数中，您是从函数参数中设置 articles，而不是从组件中设置属性。你应该像这样使用this.articles：

  getArticles(url: string, articles: any[]) {
    this.httpClient.get(url).toPromise().then(response => {
      console.log(response['next_page']);
      if (this.articles === undefined) { this.articles = response['articles']; } else { this.articles = this.articles.concat(response['articles']); }
      console.log(this.articles);
      if (response['next_page'] != null) {
        this.getArticles(response['next_page'], this.articles);
      } else { console.log('End'); return this.articles; }
    });
  }