javascript - วิธีส่งข้อมูลจากคอมโพเนนต์ไปยังโมดัล ngBootstrap ใน Angular 7?

ฉันมีตารางที่แสดงข้อมูลโดยใช้ ngFor ฉันต้องการแสดงข้อมูลของแต่ละแถวในโมดอลเมื่อคลิก ฉันสามารถล็อกในคอนโซลโดยส่งแถวเป็นอาร์กิวเมนต์การคลิก แต่ไม่สามารถส่งมันเข้าไปในโมดอลได้

สมมติว่าข้อมูลในตารางถูกดึงมาจากบริการ และ modal เป็นการอ้างอิงเทมเพลตซึ่งอยู่ในไฟล์คอมโพเนนต์เดียวกับตาราง

นี่คือตัว fiddle ที่สร้างขึ้น https://stackblitz.com/edit/angular-xr8ud5

ฉันเคยใช้ Angular 1.x และข้อมูลถูกส่งผ่าน resolve ฉันเป็นมือใหม่กับ Angular และไม่เคยทำงานกับ ngBootstrap

ยินดีรับความช่วยเหลือทุกอย่าง ขอบคุณ

คำตอบ #1

การส่งข้อมูลจากคอมโพเนนต์ของคุณไปยังโมดัล ngBoostrap สามารถทำได้ผ่านการผูกข้อมูลสองทางของ Angular ซึ่งจริง ๆ แล้วเป็นวิธีเดียวกันกับที่คุณทำการผูกข้อมูลสองทางใน Angular 1.x!

ฉันได้ทำตัวอย่างสาธิตให้คุณแล้ว

ก่อนอื่น ในไฟล์ model-basic.ts ของคุณ คุณกำหนดโมเดลของคุณสำหรับโมดัล จากนั้นคุณกำหนดคุณสมบัติของโมเดล modalContent ด้วยข้อมูลแถวตาราง

modalContent:undefined
  .
  .

open(content, tableRow) {
  this.modalContent = tableRow
  this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
}

ในไฟล์ modal-basic.html ของคุณ คุณสามารถใช้นิพจน์เทมเพลต {{ ... }} เพื่อแสดงคุณสมบัติแต่ละรายการของโมเดลของคุณบนโมดอลนั้นเองได้

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Details</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    id: {{ modalContent.id }}
    <br>
    first: {{ modalContent.first }}
    <br>
    last: {{ modalContent.last }}
    <br>
    handle: {{ modalContent.handle }}
  </div>
</ng-template>

คำตอบ #2

เพียงแค่ต้องเก็บแถวที่เลือกไว้ในตัวแปร ซึ่งเราสามารถแสดงมันบน HTML ได้

ใน stackblitz ของคุณ ให้เปลี่ยน modal-basic.html เป็นดังนี้:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let tableRow of table" (click)="open(content, tableRow)">
      <th scope="row">{{tableRow.id}}</th>
      <td>{{tableRow.first}}</td>
      <td>{{tableRow.last}}</td>
      <td>{{tableRow.handle}}</td>
    </tr>
  </tbody>
</table>


<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Details</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    id:<u>{{selectedRow.id}}</u><br>
    first:<u>{{selectedRow.first}}</u><br>
    last:<u>{{selectedRow.last}}</u><br>
    handle:<u>{{selectedRow.handle}}</u>
  </div>
</ng-template>
<hr>

<pre>{{closeResult}}</pre>

ใน stackblitz ของคุณ ให้เปลี่ยน modal-basic.ts เป็นดังนี้:

import {Component} from '@angular/core';

import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
  closeResult: string;
  table = [
  {
    "id": 1,
    "first":"Mark",
    "last": "Otto",
    "handle": "@mdo"
  },{
    "id": 2,
    "first":"Jacob",
    "last": "Thornton",
    "handle": "@fat"
  },{
    "id": 3,
    "first":"Larry",
    "last": "the Bird",
    "handle": "@twitter"
  }
];

selectedRow;

  constructor(private modalService: NgbModal) {}

  open(content, tableRow) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
    //console.log(tableRow)
    this.selectedRow = {id:tableRow.id, first: tableRow.first, last:tableRow.last, handle:tableRow.handle};
  }
}