Question

我想使用内容投影在我制作的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>;
}

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

更改后，它应该有效。

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

1 个答案: