Динамически генерировать экспорт как значение переменной Angular 2

Привет, у меня есть указание, как показано ниже,

@Directive({
      selector: '[changeColor]',
      exportAs:'changeColor' 
    })
    export class ColorDirective {
@Input('mfData') public inputData: any[] = [];
        constructor(elem: ElementRef, renderer: Renderer2) {
           renderer.setStyle(elem.nativeElement, 'color', 'red');
console.info(this.inputData, 'inputData');
        }
    }

И используйте его, как показано ниже:

<h1 #x=changeColor>Hello</h1>

Что делать, если мое значение x генерируется динамически (внутри ngFor). Как можно добавить индекс перед или после x, чтобы мое значение x было уникальным? как показано ниже

<h1 #x1=changeColor>Hello1</h1>
<h1 #x2=changeColor>Hello2</h1>
....
<h1 #xn=changeColor>Hellon</h1>

Пожалуйста, помогите мне в этом, ребята .. TIA

Обновленный HTML с переменной @Input

<div class = "col-12 u-grey-container table--section u-margin-bottom-8" *ngFor = "let color of colorList;let ndx = index">

 <table class = "table table-striped" [mfData] = "color.list" #main = "changeColor" *ngIf = "color.list" (mfSelectedEntities) = "selectedRecords($event, schedule)">
<thead> ... </thead>
<tbody>
<template let-item ngFor [ngForOf] = "main.data" let-ndx = "index">
...
</tbdoy>
</table>
</div>

Просто используйте #x = "changeColor" внутри цикла *ngFor

yurzui 18.10.2018 11:46

@yurzui Он уже внутри * ngFor ..

chewi 18.10.2018 11:51

Тогда это должно сработать

yurzui 18.10.2018 11:51

когда я консоль в своей директиве, если есть несколько директив, он всегда получает первую ссылку

chewi 18.10.2018 12:22
ng-run.com/edit/mBDQgjKiS2PoJeWcLqD4
yurzui 18.10.2018 12:26

Допустим, у меня есть @ Input, `@Input ('mfData') public inputData: any [] = []; каждый раз, когда я консолью внутри своего компонента, это данные первой ссылки. Вот в чем проблема

chewi 18.10.2018 12:31

Где у вас этот ввод? Я не вижу здесь проблемы, потому что вы можете ссылаться на любую директиву в массиве через индекс

yurzui 18.10.2018 12:33
ng-run.com/edit/…
chewi 18.10.2018 12:37

Отредактировал мой вопрос с помощью ввода

chewi 18.10.2018 12:44

Можете ли вы также добавить шаблон и где его консоль?

yurzui 18.10.2018 12:47

Обновил свой вопрос.

chewi 19.10.2018 03:52
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
11
70
0

Другие вопросы по теме