Angular：基于输入更改的 API 请求

Question

我正在使用SWAPI api（星球大战）做一些测试；我的目标是在用户单击角色列表时调用 api，因此也可以显示该角色参与的电影列表。我试图通过 ngOnChanges 钩子来实现这一点，因为我使用的是没有路由的细节组件。这是它在代码中的样子：

电影组件TS：

export class MoviesComponent implements OnInit {
  selectedP
  planets: any[];
  films: any[]
  constructor(private ms: MoviesService) { }

  ngOnInit(): void {
    this.ms.getPlanets()
      .subscribe(data => {
        this.planets = data;
        this.planets.map(m => this.films = m['films'])
      })

  }


  selectCharacter(caracter: any) {
    this.selectedP = caracter;
  }
}

电影 HTML

 <div class="col-md-3" *ngIf="planets">

            <ul class="list-group" *ngFor="let p of planets">
                <a
                class="list-group-item list-group-item-action"
                (click)="selectCharacter(p)"

                [class.active]="selectedP===p">
                    {{p.name}}
                </a>
            </ul>
        </div>
        <div class="col-md-6">
            <app-detail-no-routing [character]="selectedP" [films]="films"></app-detail-no-routing>
        </div>

服务：

getPlanets(){
    return this.http.get('https://swapi.dev/api/people/')
    .pipe(map(p=>{
      let pl:any[]=p['results']
      return pl;
    }))
  }
  getCharacterMovies(url:string){
   return this.http.get(url)
  }
}

在服务中，主要方法应该是getPeople。无论如何，首先我调用 people 端点，它使用嵌套数组检索对象，所以我让 map 运算符只有一个 results 数组，这就是我在组件中订阅的内容。在那个订阅中，我有第二张地图，所以我只能拥有每个角色参与的电影数组。到目前为止一切都很好。我可以渲染所有角色，并且准备好电影数组。然后我通过 Input 装饰器传递所有这些，并在子组件中填充数组：

export class DetailNoRoutingComponent implements OnInit, OnChanges {
  @Input() character: any;
  @Input() films:any;
  value:any;
  url:any;
  participations:string[];
  constructor(private movieService:MoviesService) { }




  ngOnChanges(changes: SimpleChanges) {
    if (changes['character']) {
      this.value=changes['character']['currentValue']
      this.url=this.value['films']
      this.url.forEach((value)=> {
        this.movieService.getCharacterMovies(value).subscribe(data=>{
          this.participations=(data['title']);

            console.log(typeof this.participations)

        })
      });
    }
  }

HTML：

<h4 *ngIf="character">Movies participation</h4>
<p >{{participations}}</p>

所以，当我点击一个不同的角色时，我想显示他喜欢的电影。事实上，我只得到角色所在的最后一部电影，日志向我显示所有电影，但仅作为字符串，如果我遍历它们，我会得到字符......所以有些事情正在发生，我可以'不知道什么...有人可以给我一个提示吗？

Answer 1

在movie.component.ts中改变

ngOnInit(): void {
    this.ms.getPlanets()
      .subscribe(data => {
        this.planets = data;
        this.planets.map(m => this.films = m['films'])
      })

  }

到

ngOnInit(): void {
    this.ms.getPlanets()
      .subscribe(data => {
        this.planets = data;
        this.films = this.planets.map(m => m['films'])
      })

  }

并将您的 ngOnChanges 更改为：-

ngOnChanges(changes: SimpleChanges) {
    if (changes['character']) {
      this.value=changes['character']['currentValue']
      this.url=this.value['films']
      this.participations = [];
      this.url.forEach((value)=> {
        this.movieService.getCharacterMovies(value).subscribe(data=>{
          this.participations.push(data['title']);
            console.log(typeof this.participations)

        })
      });
    }
  }