ngFor для строк таблицы с кликабельным модальным windows. Как сделать это модальным windows с помощью функции ng- bootstrap .open ()? - PullRequest
Новая
       11

ngFor для строк таблицы с кликабельным модальным windows. Как сделать это модальным windows с помощью функции ng- bootstrap .open ()?

1 голос
/ 01 апреля 2020

Я пытаюсь составить таблицу, которая покажет места в городе. Я использую * ngFor l oop для отображения мест (строки таблицы). После нажатия на строку таблицы должно появиться модальное окно с дополнительной информацией. Я использую ng- bootstrap и загружаю информацию о местах проведения мероприятия json.

Мой вопрос к вам - каков наилучший способ (и как реализовать) создания модального окна для каждого из место проведения (строка таблицы). Я попытался поместить modalWindow в ng-контейнер и назначить ему уникальный идентификатор, но это не сработало, потому что я могу передать функции ng- bootstrap .open () только TemplateRef или Component.

Таким образом, помимо решения выше, у меня есть идея, как это сделать. Я думаю, что лучшим способом было бы создать шаблон модального окна (чтобы избежать создания почти одного и того же модального окна 100 раз), а затем передать ему значения (имя, описание и т. Д. c.) Динамически относительно места проведения. , что пользователь нажал на. Но я действительно не знаю, как это реализовать.

Прямо сейчас у меня есть этот кусок кода, который генерирует строки таблицы: 

<ng-container *ngFor="let venue of venues">
  <tr>
    <td>{{ venue.title }}</td>
    <td>{{ venue.location.city | titlecase }}</td>
    <td>{{ venue.location.zipcode }}</td>
    <td>{{ venue.location.adress }}</td>
    <td>{{ venue.dates.startdate }}</td>
    <td><button class="btn btn-outline-dark" (click)="modalService.open();">Details</button></td>
  </tr>
</ng-container>

и этот пример модального окна, что я хочу отобразить. Обратите внимание, что значения внутри модального окна должны варьироваться в зависимости от места, по которому щелкнули. Код для образца модального окна: 

  <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ venue.title }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>{{venue.description}}</p>
        </div>
      </div>
    </div>
  </div>

Не могли бы вы мне помочь, как правильно сделать модальное windows для каждого места? Спасибо! :)

1 Ответ

0 голосов
/ 01 апреля 2020

Как вы сказали, вам нужно создать компонент для модала, который получит место встречи (либо вы передадите идентификатор и получите его от модала, либо вы можете просто передать полный объект места встречи).

Внутри вашего компонента, который отображает места, создайте функцию, которая будет принимать место, которое будет вызываться при нажатии кнопки строки 

<td><button class="btn btn-outline-dark" (click)="openVenueModal(venue);">Details</button></td>

Затем внутри вашего компонента создайте вышеуказанную функцию: 

function openVenueModal(venue: Venue) {
  this.bsModalService.show(modalComponent, {
    {
      venue: venue
    }
  });
}

modalComponent - файл ссылки на модальный компонент html.

Тогда ваш модальный компонент отобразит его так, как вы показываете. У него будет свойство места, которое будет заполнено для modalService.

См. Документ ng- bootstrap, чтобы закрыть модальное окно!

Надеюсь, это поможет

...