Question

如何显示关注者的关注者数量？

我现在的设置：字段（输入）输入Github用户名，当点击按钮时，将列出用户的所有关注者。追随者用户名＆amp;已经显示了关注者ID，但我也希望显示关注者拥有的关注者数量。

了解我正在寻找的内容的图片： SCREENSHOT

github上-profile.component.ts

import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';

import {GitHubService} from './github.service';

@Component({
    selector: 'github-profile',
    styles: [
        `
            /*noinspection CssInvalidPropertyValue*/.avatar {
                width: 100;
                height: 100;
                border-radius: 100%;
            }
        `
    ],
    template: `
        <i *ngIf="isLoading" class="fa fa-spinner fa-spin fa-3x"></i>
    <form #f="ngForm" class="animated fadeInRight">
        <div class="form-group">
            <label for="name">Follower finder</label>
            <input ngControl="username"
                   #username="ngForm"
                   [(ngModel)] = "inputusr"
                   type="text" 
                   class="form-control"
                   placeholder="Enter GitHub username"
                   required
                   minlength="3">
                   <div *ngIf="username.touched && username.errors">
                       <div *ngIf="username.errors.required" 
                            class="alert alert-danger">
                            Username is required.
                       </div>
                       <div class="alert alert-danger"
                            *ngIf="username.errors.minlength">
                            First name should be minimum 3 characters.
                       </div>
                   </div>

        </div>
        <button (click)=OnClick($event) type="submit" class="btn btn-default" [disabled]="!f.valid">Search</button>\
        <button type="submit" class="btn btn-danger" (click)=ClearResults($event)>Clear</button>
    </form>
    <h3 *ngIf="isVisible">@{{user.login}} aka {{user.name}}</h3>
        <img *ngIf="isVisible" class="avatar" src="{{ user.avatar_url }}">
        <h3 *ngIf="isVisible">Followers</h3>       
        <div *ngIf="isVisible" class="row">
          <div *ngFor="#follower of followers" class="col-sm-3 animated fadeInRight">
            <div class="thumbnail">
              <img *ngIf="isVisible" src="{{ follower.avatar_url }}" alt="...">
              <div class="caption">
                <a href="{{ follower.html_url }}" target="_blank"><h4 class="text-center">{{ follower.login }}</h4></a>
                <p class="text-center">User ID: {{ follower.id }}</p>
                <p class="text-center">Followers: Show followers of a follower here.</p>
              </div>
            </div>
          </div>
        </div>
    `,
    providers: [HTTP_PROVIDERS, GitHubService]
})

export class GitHubProfileComponent {

    inputusr: string;
    isVisible = false;
    isLoading = false;
    username: string;
    user = {};
    followers = {};

    constructor(private _gitHubService: GitHubService){
    }

    ClearResults($event){
        this.isVisible = false;
        this.inputusr = "";
    }

    OnClick($event){
        this.isLoading = true;
        this.username = this.inputusr;

        Observable.forkJoin(
            this._gitHubService.getUser(this.username),
            this._gitHubService.getFollowers(this.username)
        )
            .subscribe(
                res => {
                    this.user = res[0];
                    this.followers = res[1];
                },
                null,
                () => { this.isLoading = false; this.isVisible = true; })
    }
}

github.service.ts

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class GitHubService {
    private _baseUrl = "https://api.github.com/users/";

    constructor(private _http: Http){}

    getUser(username){
        return this._http.get(this._baseUrl + username)
            .map(res => res.json());
    }

    getFollowers(username){
        return this._http.get(this._baseUrl + username + "/followers")
            .map(res => res.json());
    }

}

Answer 1

在https://api.github.com/users/odetocode的响应中有一个名为“关注者”的键，这正是您所需要的。

如果您想要用户的每个关注者的基本细节，可以使用以下方法。

URL https://api.github.com/users/:username/followers基本上返回一个对象数组，每个对象代表一个跟随者。

响应中返回的条目数上限为30。

解决方法

所以基本上为了获取更多用户，我们可以在url中附加查询字符串参数?page=1，?page=2等等。

检查响应直到array = 0的长度; 这将给你最后一页，直到哪些粉丝存在。

然后计算最后一页中的关注者数量。

示例：我有340个关注者

因此https://api.github.com/users/:username/followers?page=13的响应将是长度为0的数组。

然后发送https://api.github.com/users/:username/followers?page=12的请求，该请求将返回长度为10的数组

粉丝数：（30 * 11）+（10 * 1）= 340

Github API - 获取Angular2中的粉丝追随者

1 个答案: