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 运算符只有一个结果数组，这就是我在组件中订阅的内容。在该订阅中，我有第二张地图，因此我只能拥有每个角色参与其中的电影数组。到目前为止一切顺利。我可以渲染所有角色并且准备好电影数组。然后我将所有这些传递给输入装饰器，并填充子组件中的数组：

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)

        })
      });
    }
  }

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

Angular: API request based on Input changes

input

ngonchanges

angular