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

没有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; }
    });
  }

Answer 2

我相信问题是我需要订阅信息，而现在它正在运行。反正谢谢你：）

import numbers
import sys

for c, col in enumerate(df1.columns):
    foundNonInt = False
    for r, index in enumerate(df1.index):
        if isinstance(x, float):
            if (x - int(x) > sys.float_info.epsilon):
                foundNonInt = True
                    break
    if (foundNonInt==False):
        df1.iloc[:,c] = int(df1.iloc[:,c])
    else:

Answer 3

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

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>

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

3 个答案: