html - Angular Nested *ngFor 在 HTML 模板中使用时给出无限结果

Question

我正在使用 Github API 构建一个 Repositories Viewer。我将 repo.name 作为另一个变量的输入，并将其作为参数传递给一个函数，该函数确实调用以获取存储库中使用的语言。

问题是它没有为存储库显示单独的语言集，而是循环所有语言并无限运行。

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 languagesUsed(repo.name)">
              <li>{{lang}}</li>
          </ul>
      </li>
    </ul>
  </div>

相同的 Component.ts 文件

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();
    }

  }

用于获取 API 的 Service.ts

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

Answer 1

这个问题是由 languagesUsed 函数引起的，有几个问题

1. 用作绑定(bind) languagesUsed()
2. 由于 async 调用，返回值 this.langs 将不是正确的值。
3. 在每次迭代中，它都会进行 ajax 调用。这导致了无限循环

要解决此问题，您将获取语言逻辑作为可观察级别的串行操作 (switchMap) 移动。一旦您收到特定的 repo，请再次调用为该用户 带来语言。然后使用接收到的 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>