angular - 在 Angular 模板中访问联合类型的属性

Question

我有一个联合类型的项目，如下所示:

export interface A {
  a: number
}

export interface B {
  b: string
}

export type MyUnionType = A | B;

我想根据属性 a 或 b 的存在，检查模板中类型为 MyUnionType 的对象是类型 A 还是类型 B。

我希望这样的事情应该有效:

<div *ngIf="'a' in item">
  {{item.a}}
</div>

Here is a stackblitz

有什么想法吗？谢谢!

Answer 1

我是这样使用的:

在 ts:

getTypeA(item: A | B): A { 
  return (item as A);
}

getTypeB(item: A | B): B { 
  return (item as B);
}

在 html 中:

<div>{{ getTypeA(item).a }}</div>
<div>{{ getTypeB(item).b }}</div>