類型檢查 Angular 模板

Question

我想對 angular 模板使用類型檢查。

當一個屬性有 2 個或更多可能的類型時，模板無法確定哪個是其上下文中的當前類型。 即使使用“如果”來檢查屬性的存在，我的 IDE (VSCODE) 也不滿意。 對於 typescript 端，我可以只使用if ('property' in myObj)但我無法在模板端重現它。

示例： https://stackblitz.com/edit/angular-ivy-bjfyu9?file=src/app/app.component.html

只需刪除屬性上的FOO接口，然后它就可以工作了......

如何檢查 angular 模板中的屬性類型？

我閱讀了 https://angular.io/guide/template-typecheck但沒有關於屬性具有 2 種或更多類型可能（null 除外）的情況。

我知道如果我在每個 object 中為 union 添加一個類似“kind”的屬性，它可能會起作用。 但我無法更改數據架構。

使用 angular 14

  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true
  }

Answer 1

如果你不能對數據模式做任何事情，最后的手段是在模板中使用any 。 除非真的有必要，否則我不會在任何其他情況下推薦任何東西，但如果沒有其他方法，那就這樣做：

<div *ngIf="$any(property).date">{{ $any(property).date }}</div>

你的分叉STACKBLITZ