我正在使用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);
  }
}

推荐答案

这个问题是由于languagesUsed功能、几个问题引起的

  1. 用作装订languagesUsed()
  2. 由于调用async,返回值this.langs将不是正确的值.
  3. 在每次迭代中,它都会进行一次AJAX调用.这导致了一个无限循环

要解决这个问题,您可以将获取语言逻辑作为可观察级别上的串行操作(switchMap)进行移动.一旦你收到一个特定的repo,就再打一个电话,把那userlanguages带过来.此后,用接收到的languages数组扩展REPO对象.

类似于下面的内容

// after receiving the repos, 
const allRepoWithLanguages = repos.map(repo => 
  // loop over them and make a `getLanguages` ajax call
  this.githubUser.getLanguages(this.username, repo.name)
  .pipe(
     // extend repo with languages
     map(languages => ({...repo, languages }))
  )
);

让我们将刚才看到的逻辑扩展到实际实现中.

TS

getRepos(){
    this.githubUser.getRepositories(this.username).pipe(
      switchMap(repos => {
         const allRepoWithLanguages = repos.map(repo => 
            this.githubUser.getLanguages(this.username, repo.name)
            .pipe(
               // amending repo with languages
               map(languages => ({...repo, languages }))
            )
         );
         return forkJoin(allRepoWithLanguages);
      }),
    ).subscribe((repos)=>{
        this.repos = repos;
        this.totalRecords = repos?.length;
    })
}

HTML

<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 repo.languages">
              <li>{{lang}}</li>
          </ul>
      </li>
   </ul>
</div>

Html相关问答推荐

UseEffect()从不调用preact

如何使用css为动态用户输入矩阵添加背景色?

对称渐变作为背景

assets资源 净值元素不会扩展到涵盖子项

我怎样才能有一个div,在其中放置一个消息,打破和不go 的div?

如何更改Django中的默认按钮?

CSS中的转换属性是如何工作的?

为什么我的网页显示网格区域彼此相邻,而不是我设置它们的方式?

伪元素:after和溢出隐藏

R 中的网页抓取数字?

CSS 网格跨度行到所有行

将图像的高度限制为固定的纵横比,并在超过时使用 object-fit

透明渐变凹矩形

调整大小时 CSS 溢出

使用 CSS flexbox 和溢出顶部而不是底部

是否可以在换行时向锚标记添加填充?

如何使svg在屏幕上可见

使用 shell 脚本复制 HTML 文件中的标题标签

如何使用 CSS 从检索到的数据属性值中go 除子字符串?

使用 :has() 伪类在select元素中设置样式选项