在可定制的Angular数据表中使用条件图标

By simon at 2018-02-07 • 0人收藏 • 32人看过

我想使用内容投影来“投射”Angular中的自定义图标 数据表我做了。我试图使这些集成电路基于条件的条件 在某一列的数据。我能够插入一个图标到每个列和 排,但我无法弄清楚如何使这些条件。 table.component.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols" 
            (click)="selectColHeader(col.prop); 
            col.enableSort && sort(col.prop)">
                {{col.header}}
                <input type="text"
                class="ds-c-field"
                [(ngModel)]=fields[col.prop] 
                (click)="selectColInput(col.prop, $event)"
                *ngIf=col.enableFilter/>
                <img 
                class="arrow"
                *ngIf="col.enableSort && col.prop === selectedColHeader"
                [src]="direction === 'asc' ? upArrowPath : downArrowPath"/>
            </th>
        </tr>
    </thead>
    <tbody *ngFor="let row of data">
        <tr>
            <td *ngFor="let col of cols">
                    <ng-container 
                    *ngTemplateOutlet="cellTemplate;
                     context: row[col.prop]">
                    </ng-container>
                {{row[col.prop]}}
            </td>
        </tr>
    </tbody>
</table>
app.component.html
<app-data-table
[data]="data" 
[cols]="cols" 
[cellTemplate]="cellTemplate">
    <ng-template #cellTemplate let-value>
        <img class="rimg1" 
        [src]="com" 
        alt="Complete"
        *ngIf="value === 'Completed'/>
    </ng-template>
</app-data-table>
table.component.ts
export class tableComponent {

  @Input() cellTemplate: TemplateRef<any>;
}

2 个回复 | 最后更新于 2018-02-07
2018-02-07   #1

* table.component.html 尝试将行<ng-container ..... ></ng-container>更改为:

<ng-container 
   *ngTemplateOutlet="cellTemplate;
      context: {prop1: row[col.prop] }"> // <-- changes here
</ng-container>
并在 app.component.html *更改行 <ng-template #cellTemplate let-value> 至 : <ng-template #cellTemplate let-value="prop1"> 变化之后,它应该工作。

2018-02-07   #2

* table.component.html 尝试将行<ng-container ..... ></ng-container>更改为:

<ng-container 
   *ngTemplateOutlet="cellTemplate;
      context: {prop1: row[col.prop] }"> // <-- changes here
</ng-container>
并在 app.component.html *更改行 <ng-template #cellTemplate let-value> 至 : <ng-template #cellTemplate let-value="prop1"> 变化之后,它应该工作。

登录后方可回帖

Loading...