Angular/ TypeScript - Hur man gör typomvandling i HTML-fil?

Jag har ett TypeScript-gränssnitt:

export interface iA {
  name: string;
}
export interface iB {
  size: number;
}
export interface iX {
  id: number;
  data: iA | iB;
}

Sedan använder jag i ett av mina Angular-komponentklasser gränssnittet iX:

// example.component.ts
class ExampleComplnent {
  public item: iX = {
    id: 1,
    data: { name: 'test' }
  }
}

<!-- example.component.html -->
<div>{{ item.data.name }}</div>

Detta kommer att ge ett fel: Propery 'name' finns inte på typen 'iB'.

Jag vet att jag i en TypeScript-fil kan använda typomvandling på detta sätt:

const name = (item.data as iA).name;

Men hur kan jag göra typomvandling på HTML-sidan?

Jag vill också nämna att i min kod validerar jag att item.data är av typen iA, inte av typen iB. Så jag är säker på att det har egenskapen 'name'.

Svar #1

En lösning till. Jag använder detta för radradens mall

  1. Skapa hjälpfunktion
export function castTo<T>(): (row) => T {
  return (row) => row as T
}
  1. Anropa funktion i komponent
$row = castTo<YourType>();
  1. Använd i mall
$row(row).properties

Svar #2

Som @PoulKruijt nämnde, tillhandahåller inte Angular ett sätt att göra typomvandling med as i komponentens mall. Du kan dock överväga att använda $any(), som omvandlar till any. Det kommer att undertrycka felet men det är inte typ-säkert. Se detta: https://angular.io/guide/template-syntax#the-any-type-cast-function

Relaterade artiklar