Eu tenho uma tabela com dados exibidos usando ngFor. Preciso exibir dados de uma linha individual em um modal com um clique. posso registrá-lo no console, passando a linha como argumento de clique, mas não consigo passá-lo dentro do modal.
Assumindo que os dados da tabela estão sendo obtidos de um serviço e o modal é uma referência de modelo que está no mesmo arquivo de componente da tabela.
Aqui está um violino criado https://stackblitz.com/edit/angular-xr8ud5
Usei o angular 1.x e os dados foram passados pelo resolve. Sou novo no Angular e nunca trabalhei no ngBootstrap.
Qualquer ajuda é apreciada. obrigado
A passagem de dados de seu componente para o modal ngBoostrap pode ser feita por meio da vinculação bidirecional do Angular . Na verdade, é exatamente a mesma maneira que você executa a vinculação bidirecional no Angular 1.x!
Eu fiz uma demonstração para você.
Primeiro, em seu model-basic.ts, você define seu modelo para o modal. Em seguida, você atribui a modalContent
propriedade do modelo com os dados da linha da tabela.
modalContent:undefined
.
.
open(content, tableRow) {
this.modalContent = tableRow
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
}
Em seu modal-basic.html, você pode usar a expressão de modelo {{...}} para exibir as propriedades individuais de seu modelo em seu próprio modal.
<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">×</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>
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras