ฉันจะใช้ค่าดัชนีของอาร์เรย์และส่งต่อไปยังม็อดัล 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 อื่น

คำตอบ #1

ประกาศคุณสมบัติอื่นเหมือนกับ summary_short ใน component.ts
ผูกกับ (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
}
...

คำตอบ #2

เพิ่มฟังก์ชันให้กับปุ่ม อ่านเพิ่มเติม อะไรบางอย่างแบบนี้:

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

จากนั้นใน .ts ประกาศตัวแปร modalText และทุกครั้งที่ปุ่มนี้ถูกคลิก:

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

สุดท้าย ใน modal ให้เรียก {{ modalText }}.