Website-Suche

typescript - Wie zwingt man ein im "let"-Clause im HTML Angular-Template deklariertes Element?

Ich habe eine Komponente, die es ermöglicht, eine mat-table zu rendern. Für jede Zelle kann man den Wert angeben oder, falls vorhanden, ruft die Komponente einen ngTemplateOutlet auf und übergibt eine Rendering-Funktion, die vom aufrufenden Objekt abgerufen wird.

export interface ColumnConfig {
  name: string;
  headerTemplate?: TemplateRef<Element>;
  headerLabel?: string;
  headerClasses?:string;
  bodyTemplate?: TemplateRef<Element>;
  bodyClasses?:string;
  visible?: boolean;
  align?: string;
}

<mat-cell mat-cell *matCellDef="let element">
    <ng-container *ngIf="!column.bodyTemplate; else bodyTemplate">
        {{ element[column.name] }}
    </ng-container>
    <ng-template #bodyTemplate [ngTemplateOutlet]="column.bodyTemplate!" [ngTemplateOutletContext]="{ $implicit: element }"></ng-template>
</mat-cell>

Ich habe kürzlich viele Projektabhängigkeiten aktualisiert (TypeScript, Angular, TSLint->ESLint, ...) und jetzt erhalte ich den folgenden Fehler, der zuvor nicht aufgetreten ist.

Object literal may only specify known properties, and '"$implicit"' does not exist in type 'Element'.

Ich verstehe nicht, wie man das Element tippt, das durch das "let" von "matCellDef" definiert wird.

Danke!

Antwort #1

Ich habe es gelöst, indem ich die Definition von ngTemplateOutletContext in eine TS-Methode verschoben habe:

<mat-cell mat-cell *matCellDef="let element">
    <ng-container *ngIf="!column.bodyTemplate; else bodyTemplate">
        {{ element[column.name] }}
    </ng-container>
    <ng-template #bodyTemplate [ngTemplateOutlet]="column.bodyTemplate!" [ngTemplateOutletContext]="generateContext(element)"></ng-template>
</mat-cell>

Hier der TS-Fragment:

public generateContext(element:any):any{
    return {
      $implicit: element
    };
  }

Wenn jemand wüsste, wie man das nur mit den HTML-Definitionen macht, würde ich es gerne ändern.

Antwort #2

Ich denke, das könnte funktionieren

<mat-cell mat-cell *matCellDef="let element">
    <ng-container *ngIf="!column.bodyTemplate; else bodyTemplate" [ngTemplateOutlet]="bodyTemplate" [ngTemplateOutletContext]="{ element: element }">
        {{ element[column.name] }}
    </ng-container>
    <ng-template #bodyTemplate let-element="element">
...
    </ng-template>
</mat-cell>

Verwandte Artikel