Variável de referência de modelo dinâmico dentro de ngFor (Angular 9)

100

Como declarar uma variável de referência de modelo dinâmico dentro de um elemento?ngFor

Eu quero usar o componente popover do ng-bootstrap, o código popover (com ligação Html) é como mostrado:

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
<button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>

Como posso envolver esses elementos dentro ngFor?

<div *ngFor="let member of members">
    <!-- how to declare the '????' -->
    <ng-template #????>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="????" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>

Hmmm ... alguma ideia?

angular ng-bootstrap angular-template Boo Yan Jiong
fonte
Não existem variáveis ​​de referência dinâmicas. Por que você acha que precisa ser dinâmico?
Günter Zöchbauer
porque o tutorial deles dizia, para ter ligação html dentro de um popover, precisamos criar um ng-templatee referenciá-lo com a variável de referência de modelo , mas agora quero usar este popover dentro de um ngForelemento
Boo Yan Jiong
8
Faça o mesmo. A variável do modelo será diferente para cada elemento, mesmo quando tiver o mesmo nome.
Günter Zöchbauer
3
O que acontece se você usar a mesma referência para tudo? Você já testou?
developer033
Ha, nunca pensei nisso ... Vou testá-lo agora ... porque fico pensando em como declarar uma ** variável de referência de modelo com "índice" ** ... atualizarei depois de testá-la. ..: D
Boo Yan Jiong

Respostas:

105

Variáveis ​​de referência de modelo têm como escopo o modelo em que são definidas. Uma diretiva estrutural cria um modelo aninhado e, portanto, apresenta um escopo separado.

Então você pode usar apenas uma variável para sua referência de modelo

<div *ngFor="let member of members">
  <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>
  <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
      I've got markup and bindings in my popover!
  </button>
</div>

e deve funcionar porque já foi declarado dentro <ng-template ngFor

Exemplo de Plunker

Para obter mais detalhes, consulte também:

Yurzui
fonte
1
Observe que se você estiver usando um @ViewChild, você não pode usar esta solução (e então deve usar o de @AlexBoisselle)
Aleatório de
18

Esta é a melhor solução que encontrei: https://stackoverflow.com/a/40165639/3870815

Nessa resposta, eles usam:

@ViewChildren('popContent') components:QueryList<CustomComponent>;

Para construir uma lista desses componentes gerados dinamicamente. Recomendo que você dê uma olhada!

Alex Boisselle
fonte
1
A melhor resposta!
igg
1

Outra maneira de permitir isso é criar um componente que envolve o botão e o modelo ng

<div *ngFor="let member of members">
    <popover-button [member]="member"></pop-over-button>
</div>

E tenha o seguinte no componente do botão popover

<ng-template #popContent>Hello, <b>{{member.name}}</b>!</ng-template>
    <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>
user14002866
fonte
-2

Você pode usar trackBy: trackByFnem*ngFor

<div *ngFor="let member of members;trackBy: trackByF">
    <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>
Babak irannezhad
fonte