使用 ngFor 和 ngIf 显示所有带有索引的一件事

Question

当我点击“mer info”（瑞典语）时，我在 console.log 中得到正确的索引号。但在网站上一切都显示出来了。关闭时也一样。我错过了什么？该信息来自 api，使用 observalbes 和 subscribe

<section>
    <article *ngFor="let m of showMovies; let i =index" >
        <p  (click)="over(i)">Mer info</p>
        <img [src]="m.imageUrl">

        <div class="containmovie">
            <p class="moviename">Movie:</p>
            <p>{{ m.name}}</p>

            <div class="showmore" *ngIf="showMoreInfo">
                <button (click)="leave(i)">X</button>
                
                {{ m.description }}
                År: {{ m.year }}
            </div>
        </div>
    </article>
</section>

showMovies: IData[] = []
  order: IData[] = [];
  checkOutId: number = 0;
  showMoreInfo: boolean = false
  toCheckout: number = 0;


  constructor(private service: MoviesService, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.service.movies$.pipe(take(1)).subscribe((dataFromService: IData[]) => {
      this.showMovies = dataFromService,
        console.log(dataFromService)
    })

    this.service.getServerData()

  }
    
      over(i: number) {
        this.showMoreInfo = true
        console.log(i)
    
      }
      leave(i: number) {
        this.showMoreInfo = false
        console.log(i)
    
      }

Answer 1

在 this.showMovies = dataFromService, 之后向您的 showMovies 对象添加新属性：

this.showMovies.forEach( movie => {
    movie['showMoreInfo'] = false;    
});

在 over 方法中替换 this.showMoreInfo = true 为：

this.showMovies[i].showMoreInfo = true;

在 leave 方法中，将 this.showMoreInfo = false 替换为：

this.showMovies[i].showMoreInfo = false;

然后在模板中执行：

*ngIf="m.showMoreInfo"

并替换

with:

和添加trackByFn 到 ts：

trackByFn(index) {
    return index;
}

编辑：您可能需要更改 IData 类型以包含“showMoreInfo”