Как установить динамическую переменную 'ng-template' для отображения конкретного поповера - PullRequest
0 голосов
/ 06 мая 2019

Я хочу показать поповер на каждой кнопке строки в таблице HTML для отображения конкретных данных строки, но я сталкиваюсь с проблемой, заключающейся в том, что, когда имеется много строк и я нажимаю кнопку, отображаются все всплывающие окна.Я использую 'ng-zorro-antd' для всплывающих окон и ng-template для показа моего шаблона данных.Если кто-нибудь может мне помочь.

                          `<td>
                            <div>
                              <button style="width: 100%;"
                                      class="btn btn-sm btn-primary text- 
                                      light"
                                      nz-button
                                      nzPlacement="left"
                                      nzType="default"
                                      nz-popover
                                      nzTitle="Add Details"
                                      [(nzVisible)]="visible3"
                                      nzTrigger="click"
                                      [nzContent]="detailsTemplate">
                                Add Details <i class="fa fa-arrow-down"> 
                                 </i>
                              </button>
                              <a data></a>
                            </div>


                            <ng-template #detailsTemplate>
                              <div class="mb-2">
                                <input style="text-align:center;"
                                       placeholder="Enter Mfg Date"
                                       class="table-input"
                                       formControlName="mfgDate"
                                       name="description"
                                       type="date">
                              </div>

                              <div class="mb-2">
                                <input style="text-align:center;"
                                       placeholder="Enter Expiry Date"
                                       class="table-input"
                                       formControlName="expiryDate"
                                       name="description"
                                       type="date">
                              </div>

                              <div class="mb-2">
                                <input style="text-align:center;"
                                       placeholder="Batch No."
                                       class="table-input"
                                       formControlName="batchNumber"
                                       name="batchNumber"
                                       type="number">
                              </div>

                              <div class="mb-2">
                                <input style="text-align:center;"
                                       placeholder="Serial No."
                                       class="table-input"
                                       formControlName="serialNumber"
                                       name="serialNumber"
                                       type="number">
                              </div>

                              <div class="mb-2">
                                <input style="text-align:center;"
                                       placeholder="Mfg-Part No."
                                       class="table-input"
                                       formControlName="mfgPartNo"
                                       name="mfgPartNo"
                                       type="number">
                              </div>

                              <div class="mb-2">
                                <input style="text-align:center;"
                                       placeholder="Shelf Location"
                                       class="table-input"
                                       formControlName="shelfLocation"
                                       name="shelfLocation"
                                       type="text">
                              </div>
                            </ng-template>


                          </td>

`

Когда я нажимаю любую кнопку строки, она показывает все всплывающие окна multiple popovers are showing

...