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

Question

我想使用内容投影来“投影”我制作的 Angular 数据表中的自定义图标。我尝试根据特定列中的数据使这些图标成为有条件的。我可以在每列和行中插入一个图标，但我无法弄清楚如何使这些成为条件。

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

表.组件.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">

更改后，它应该可以工作。