Как я могу установить ссылочные переменные на определенный элемент c в * ngFor? - PullRequest
Новая
       5

Как я могу установить ссылочные переменные на определенный элемент c в * ngFor?

0 голосов
/ 16 июня 2020

У меня есть этот код

<ng-container *ngFor="let item of results;let i = index"> <ion-item #triggerElement lines="none">

Мне нужно установить ссылку #triggerElement на элемент с индексом 3. Как это сделать? Я пробовал использовать div

<div *ngIf="i == 2" #triggerElement ></div>, но он выдает ошибку: «Не могу прочитать свойство nativeElement of undefined». Есть решения?

Ответы [ 2 ]

1 голос
/ 16 июня 2020

Вместо обработки этого logi c (что очень сильно agile) в шаблоне, попробуйте использовать @ViewChildren.

Получить все элементы массива в шаблоне в QueryList в своем классе TS и найдите элемент с требуемым индексом -

Ваш шаблон - 

<ng-container *ngFor="let item of results;let i = index">
    <div #triggerElement lines="none">
    {{ i }}   {{ item }}
  </div>
</ng-container>

Ваш компонент - 

import { Component, VERSION, AfterViewInit, ViewChildren, TemplateRef, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {

  @ViewChildren('triggerElement') elements: QueryList<ElementRef>;      <---------

  results = [ 'Cheese', 'Tomato', 'Olives', 'Basil'];

  ngAfterViewInit() {
    const element = this.elements.find((e, index) => index === 3);    <-----------
    console.log(element);
  }

}

Я воссоздал по этой ссылке - https://stackblitz.com/edit/vm-tooltip-directive?file=src%2Fapp%2Fapp.component.ts

0 голосов
/ 16 июня 2020

Похоже, что это особый предмет, поэтому я думаю, что стоит выделить его отдельно от всего остального. Тогда простое решение могло бы быть: 

<ion-item *ngFor="let item of results | slice:0:2"> .. </ion-item>
<ion-item #triggerElement lines="none"> .. </ion-item>
<ion-item  *ngFor="let item of results | slice:3"> .. </ion-item>
...