Question

我正在自己的电影项目中工作，并且想要查找按类型可以改正的类似电影。我不知道该怎么做

此刻，我使用管道为类似的电影创建了过滤器，并使用组件来查看结果。我的json以创建常量的.ts视图格式进行查看。在此下方，我将管道和组件的代码发送给您查看，然后等待您的回答。

export class SimilarPipe implements PipeTransform {

  transform(items: MovieModel[], filterSimilar: MovieModel): any {
    if (items == null) {
      return items;
    }
    return items.filter(item => item.genres.indexOf(filterSimilar) >= -1);
  }
}
// Controller
function search(nameKey, myArray){
  for (var i=0; i < myArray.length; i++) {
    if (myArray[i].genres === nameKey) {
      console.log(myArray[i])
      return myArray[i];
    }
  }
}
getSimilarGenres() {
    this.route.paramMap
      .switchMap((params: ParamMap) =>
        this.service.getMoviesID(+params.get('id'))
      )
      .takeUntil(this.ngUnscribe)
      .subscribe(movies => {
        const a = Object.values(movies);
        this.movie = a;
        search(a[4], this.movieList);
      });
  }

setSimilarMovies(genre) {
    this.showSimilarMovie ! = genre ? this.showSimilarMovie = genre : this.showSimilarMovie = null;
    this.store.dispatch({type: 'SIMILAR MOVIE'});
  }

<div (load)="setSimilarMovies(genres)"  class="qazaq-video-list-items">
  <div class="qazaq-v-list-items mt-30" *ngFor="let movie of movieList">
    <div class="qazaq-v-list-i-img">
      <img src="assets/image/{{movie.img}}" alt="">
    </div>
    <div class="qazaq-v-list-content">
      <div class="qazaq-v-tag c2">
        <span>{{movie.genres}}</span>
      </div>
      <a [routerLink]="['/movie', movie.id]">{{movie.name}}</a>
      <div class="movie-time">
        <i class="fa fa-clock-o c1"></i>
        <span> {{movie.length}} </span>
      </div>
    </div>
  </div>
</div>

那是我的html模板

<div class="qazaq-v-list-items mt-30" *ngFor="let movie of movieList | similar: showSimilarMovie">
    <div class="qazaq-v-list-i-img">
      <img src="assets/image/{{movie.img}}" alt="">
    </div>
    <div class="qazaq-v-list-content">
      <div class="qazaq-v-tag c2">
        <span>{{movie.genres}}</span>
      </div>
      <a [routerLink]="['/movie', movie.id]">{{movie.name}}</a>
      <div class="movie-time">
        <i class="fa fa-clock-o c1"></i>
        <span> {{movie.length}} </span>
      </div>
    </div>
  </div>

Answer 1

要知道很重要，因为Array和Object是reference类型，所以当比较javascript中的两个数组或对象时，它不会比较值，它比较reference：

[{name:'movieA'}] == [{name:'movieA'}] // always return false

// This make the code below always return true

this.showSimilarMovie != genre // always return true

indexOf函数与之类似，它找到对象或数组 reference 而不是值：

[{1:1}].indexOf({1:1}) // always return -1

//this make the code in your transform pipe always return an empty array

return items.filter(item => item.genres.indexOf(filterSimilar) >= -1); // return []

查找数组中是否存在对象。您应该比较它的属性。例如，您的MovieModel具有一个名为movieName的属性。然后找到该对象的正确方法如下：

items.filter(item => item.genres.find(genre => genre.movieName === filterSimilar.movieName) != undefined);

对于比较数组，这是一个巨大的话题。我建议您访问SO上提出的以下问题：

How to compare arrays in JavaScript?

Comparing Arrays of Objects in JavaScript

您发布的代码的主要问题是compare方法错误。

我建议您花些时间进行研究，比较那些reference的比较概念，然后将其应用于代码中，以查看是否还有其他特定问题，因为现在的问题太广泛了。

希望我的回答会有所帮助。

如何通过管道制作类似的电影

1 个答案: