如何使用数组的索引值并将其传递到HTML模态，以便我可以在那里显示数据而无需在Angular 7中使用循环

Question

我如何使用数组的索引值并将其传递到HTML模态，以便我可以在此处显示数据而无需在Angular 7

中使用循环

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';
import { movieModel } from '../models/movie';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {
  movies:movieModel[];
  constructor(public api:ApiService) { }
  ngOnInit() {
      this.loadMovies();
  }
      
loadMovies(): void {
    this.movies = [];
    this.api.getMovies().subscribe(
    data =>
    {
        this.movies = data.results;
        this.movies = this.movies.slice(0 , 5);
        console.log(this.movies);
     }
  );
 }
}

<h1>Top 5 Movies by the New York Times</h1>
<div class="uk-child-width-1-3@s uk-grid-match" uk-grid>
    <div *ngFor="let movie of movies;  let i = index">
        <div class="uk-card uk-card-hover uk-card-body">
            <h3 class="uk-card-title">{{movie.display_title}}</h3>
            <span>Headline: {{movie.headline}}</span><br/>
            <span>Summary: {{movie.summary_short | characters:150 }}</span><br/><button class="uk-button uk-button-default" uk-toggle="target: #my-id">Read More</button><br/>
            <p>By: {{movie.byline}}<br/>Rating:{{mpaa_rating || NA}}<br/>Date of Release: {{movie.publication_date | date: 'dd/MM/yyyy'}}</p>
        </div>
    </div>
</div>
<div id="my-id" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Summary</h2>
                {{movie.summary_short}}
        <button class="uk-modal-close uk-button uk-button-default" type="button">Close</button>
    </div>
</div>

有人可以向我解释一下我如何获得电影的价值。Summary_short要在对话框中工作，我已经完成了for loop索引，但不能弄清楚如何将其传递给其他HTML元素

Answer 1

1. 声明component.ts中的summary_short之类的另一个属性。
2. 绑定在"阅读更多"按钮的(click)上，将movie.summary_short分配给summary_short。

component.html

<button (click)="saveSummary(movie.summary_short)" class="uk-button uk-button-default" uk-toggle="target: #my-id">
  Read More
</button>
...
<div id="my-id" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Summary</h2>
                {{summary_short}}
        <button class="uk-modal-close uk-button uk-button-default" type="button">Close</button>
    </div>
</div>
...

component.ts

...
summary_short
...
saveSummary(summary_short) {
  this.summary_short = summary_short
}
...

Answer 2

在Read More按钮中添加功能，类似的内容：

<button class="uk-button uk-button-default" uk-toggle="target: #my-id" (click)="readMore(movie.summary_short)">Read More</button>

然后在 .ts中，声明一个var modalText，每次单击此按钮：

readMore(text: string){
    this.modalText = text;
}

最后，在modal中，致电{{ modalText }}。