我正在使用Github API构建一个存储库查看器.我将repo.name作为另一个变量的输入,并将其作为参数传递给一个函数,该函数确实会调用以获取在存储库中使用的语言.
问题是,它没有显示存储库的单个语言集,而是循环所有语言并无限运行.
HTML File个
<div class="user-repos">
<ul id="repos" *ngFor="let repo of repos | paginate:{ id:'listing_repos',itemsPerPage:10, currentPage:page, totalItems:totalRecords}">
<li>
<h4>{{ repo.name | uppercase}}</h4>
<p>{{ repo.description }}</p>
<ul *ngFor="let lang of languagesUsed(repo.name)">
<li>{{lang}}</li>
</ul>
</li>
</ul>
</div>
Component.ts file for the same个
export class UserComponentComponent implements OnInit {
@Input() username:any;
constructor(private githubUser:UserDataService) { }
repos:Array<any> = [];
avatar:any;
name:String = '';
location:String = '';
bio:String = '';
twitter:String = '';
github:String = '';
totalRecords = 0;
page = 1;
langs:Array<any> = [];
getUser(){
this.githubUser.getData(this.username).subscribe((data)=>{
//console.log(data);
this.avatar = data.avatar_url;
this.name = data.name;
this.location = data.location;
this.bio = data.bio;
this.twitter = `https://twitter.com/${data.twitter_username}`;
this.github = `https://github.com/${data.login}`;
})
}
getRepos(){
this.githubUser.getRepositories(this.username).subscribe((repos)=>{
this.repos = repos;
this.totalRecords = repos?.length;
// this.languagesUsed = Object.keys(repos.languages_url);
})
}
languagesUsed(repoName:any){
this.githubUser.getLanguages(this.username, repoName).subscribe((languages)=>{
// console.log(Object.keys(languages));
this.langs = Array.from(Object.keys(languages));
})
return this.langs;
}
ngOnInit(): any{
this.getUser();
this.getRepos();
}
}
Service.ts for fetching the API's个
export class UserDataService {
constructor(private http:HttpClient) {}
getData(username:String):Observable<any>{
let user = `https://api.github.com/users/${username}`;
return this.http.get(user);
}
getRepositories(username:String):Observable<any>{
let repos = `https://api.github.com/users/${username}/repos`;
return this.http.get(repos);
}
getLanguages(username:String, repo:String):Observable<any>{
let languages = `https://api.github.com/repos/${username}/${repo}/languages`;
return this.http.get(languages);
}
}