جاوااسکریپت - چگونه دادهها را از یک کامپوننت به مدال ngBootstrap در Angular 7 منتقل کنیم؟

من یک جدول با دادههایی که با استفاده از ngFor نمایش داده میشوند، دارم. نیاز دارم دادههای یک ردیف خاص را هنگام کلیک در یک مودال نمایش دهم. میتوانم آن را با پاس دادن ردیف به عنوان آرگومان کلیک در کنسول ثبت کنم اما نمیتوانم آن را داخل مودال منتقل کنم.

با فرض اینکه دادههای جدول از یک سرویس دریافت میشوند و مودال یک ارجاع قالب است که در همان فایل کامپوننت به عنوان جدول قرار دارد.

اینجا یک فیدل ساخته شده است https://stackblitz.com/edit/angular-xr8ud5

من از انگولار ۱.x استفاده کردهام و دادهها از طریق resolve منتقل میشدند. من به انگولار تازه وارد هستم و هرگز با ngBootstrap کار نکردهام.

هر کمکی قدردانی میشود. ممنون

پاسخ شماره ۱

انتقال داده از کامپوننت شما به مودال ngBoostrap میتواند از طریق بایندینگ دوطرفه انگولار انجام شود. در واقع، این دقیقاً همان روشی است که شما برای انجام بایندینگ دوطرفه در انگولار 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>

پاسخ شماره ۲

فقط نیاز داریم ردیف انتخابشده را در یک متغیر ذخیره کنیم که بعداً بتوانیم آن را در HTML نمایش دهیم

در استکبلیتز خود، 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>

در استکبلیتز خود، 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};
  }
}