Ссылочная переменная динамического шаблона внутри ngFor (Angular 9)

97

Как объявить ссылочную переменную динамического шаблона внутри ngForэлемента?

Я хочу использовать компонент popover из ng-bootstrap, код всплывающего окна (с привязкой Html) выглядит следующим образом:

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

Как мне обернуть эти элементы внутрь 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>

Хммм ... есть идеи?

angular ng-bootstrap angular-template Бу Ян Цзюн
источник
Не существует такой вещи, как динамические ссылочные переменные. Как вы думаете, почему он должен быть динамичным?
Günter Zöchbauer
потому что в их учебнике сказано, что для привязки html внутри всплывающего окна нам нужно создать ng-templateи связать его со ссылочной переменной шаблона , но теперь я хочу использовать это всплывающее окно внутри ngForэлемента
Бу Ян Джионг,
8
Просто сделай то же самое. Переменная шаблона будет отличаться для каждого элемента, даже если у него одно и то же имя.
Günter Zöchbauer
3
Что будет, если использовать для всего один и тот же реф ? Вы это проверяли?
developer033
Ха, я никогда не думаю об этом ... Я протестирую это сейчас ... потому что я продолжаю думать о том, как объявить ** ссылочную переменную шаблона с "index" ** ... будет обновляться позже, когда я ее протестирую. ..: D
Boo Yan

Ответы:

99

Ссылочные переменные шаблона привязаны к шаблону, в котором они определены. Структурная директива создает вложенный шаблон и, следовательно, вводит отдельную область.

Таким образом, вы можете просто использовать одну переменную для ссылки на ваш шаблон

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

и он должен работать, потому что он уже объявлен внутри <ng-template ngFor

Пример Plunker

Подробнее см. Также:

Юрзуй
источник
1
Обратите внимание, что если вы используете @ViewChild, вы не можете использовать это решение (а затем следует использовать решение @ AlexBoisselle)
Случайно
17

Это лучшее решение, которое я нашел: https://stackoverflow.com/a/40165639/3870815

В этом ответе они используют:

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

Чтобы создать список этих динамически генерируемых компонентов. Настоятельно рекомендую вам проверить это!

Алекс Буассель
источник
1
Лучший ответ!
igg
1

Другой способ разрешить это - создать компонент, который обертывает кнопку и ng-template.

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

И в компоненте popover-button укажите следующее:

<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
источник
-1

Вы можете использовать trackBy: trackByFnв*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>
Бабак Ираннежад
источник