html - 如何使用数组的索引值并将其传递给 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>

有人可以向我解释一下我是如何获得 movie.summary_short 的值以在对话框中工作的吗？我已经完成了 for 循环索引，但无法弄清楚如何将它传递给其他 HTML 元素

Answer 1

1. 在 component.ts 中声明另一个属性，如 summary_short。
2. 绑定(bind)“阅读更多”按钮的(单击)，将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
}
...