Question

嗨，我有一个如下的指令，

@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.log(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

使用@Input变量更新HTML

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

动态生成exportAs变量值Angular 2

0 个答案: