Javascript 如何在Angular 7中将数据从组件传递到ngBootstrap模式？

我有一个使用ngFor显示数据的表。我需要在单击时以模式显示单个行数据。我可以通过将行作为click参数传递到控制台中来记录它，但不能在模式中传递它

假设表数据是从服务中提取的，并且模式是一个模板引用，它与表位于同一个组件文件中

这是一把小提琴

我使用了angular 1.x，数据通过resolve传递。我对Angular是新手，从未在ngBootstrap工作过

---

感谢您的帮助。谢谢

您可以在组件中为模态数据创建变量：

或者，您可以为modal:
modal-basic.ts

openModal(dataToModal) {
        const modalRef = this.modalService.open(ModalComponent);
        modalRef.componentInstance.inputDataInModalComponent = dataToModal;
        modalRef.result.then(() => {});
        }, () => {});
    }

modal.component.ts

export ModalComponent implements OnInit{
    @Input() inputDataInModalComponent: any;

    ngOnInit() {
         console.log(inputDataInModalComponent);
    }
}

---

只需要将所选行存储在一个变量中，然后我们就可以在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>

modalContent:undefined
  .
  .

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

---

可以通过Angular将数据从组件传递到ngBoostrap模式。实际上，这与在角1.x上执行双向绑定的方式非常相同

我已经为你做了一份工作

首先，在model-basic.ts上定义模态的模型。然后，使用表行数据指定

modalContent

model属性

<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>

在modal-basic.html上，可以使用{…}在modal本身上显示模型的各个属性

细节
&时代；
id:{{modalContent.id}


第一：{{modalContent.first}


最后：{{modalContent.last}


句柄：{{modalContent.handle}

检查此答案是否对您有帮助-非常感谢！现在可以了。我只需将传递的参数保存在.open（）中的一个变量中，simpleCheers:）很高兴能提供帮助！

<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>