填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

範本表示式運算子

Template expression operators

已標記為歸檔
Marked for archiving

為確保你擁有最佳的體驗,本主題已標記為存檔,直到我們確定其清楚地傳達了最準確的資訊為止。

To ensure that you have the best experience possible, this topic is marked for archiving until we determine that it clearly conveys the most accurate information possible.

同時,下列主題可能會有所幫助:分層注入器

In the meantime, this topic might be helpful: Hierarchical injectors.

如果你認為不應將此內容存檔,請提交 GitHub 問題

If you think this content should not be archived, please file a GitHub issue.

Angular 範本表達語言採用了 JavaScript 語法的子集,並為特定情況添加了一些特殊的運算子。

The Angular template expression language employs a subset of JavaScript syntax supplemented with a few special operators for specific scenarios.

有關包含本指南中程式碼片段的有效示例,請參見現場演練 / 下載範例

See the現場演練 / 下載範例for a working example containing the code snippets in this guide.

非空斷言運算子( !

The non-null assertion operator ( ! )

使用 TypeScript 的 --strictNullChecks 標誌時,可以防止型別檢查器使用 Angular 的非空斷言運算子 !

When you use TypeScript's --strictNullChecks flag, you can prevent the type checker from throwing an error with Angular's non-null assertion operator, !.

Angular 非空斷言運算子使 TypeScript 型別檢查器暫停對特定屬性表示式的 nullundefined 的嚴格檢查。

The Angular non-null assertion operator causes the TypeScript type checker to suspend strict null and undefined checks for a specific property expression.

例如,你可以斷言 item 也是已定義的。

For example, you can assert that item properties are also defined.

<!-- Assert color is defined, even if according to the `Item` type it could be undefined. --> <p>The item's color is: {{item.color!.toUpperCase()}}</p>
src/app/app.component.html
      
      <!-- Assert color is defined, even if according to the `Item` type it could be undefined. -->
<p>The item's color is: {{item.color!.toUpperCase()}}</p>
    

通常,你要確保任何屬性繫結都不為 nullundefined 。但是,在某些情況下,這種狀態是可以接受的。對於這些情況,可以使用 Angular 的非空斷言運算子來防止 TypeScript 報告某個屬性為 nullundefined

Often, you want to make sure that any property bindings aren't null or undefined. However, there are situations in which such states are acceptable. For those situations, you can use Angular's non-null assertion operator to prevent TypeScript from reporting that a property is null or undefined.

非空斷言運算子 ! 是可選的,除非你要啟用嚴格的空檢查。

The non-null assertion operator, !, is optional unless you turn on strict null checks.

有關更多資訊,請參見 TypeScript 的嚴格空檢查

For more information, see TypeScript's strict null checking.

$any() 型別轉換函式

The $any() type cast function

有時,繫結表示式會在 AOT 編譯期間觸發型別錯誤,並且不可能或很難完全指定型別。要使此錯誤靜音,可以使用 $any() 強制轉換函式把表示式強制轉換為 any 型別,如下例所示:

Sometimes a binding expression triggers a type error during AOT compilation and it is not possible or difficult to fully specify the type. To silence the error, you can use the $any() cast function to cast the expression to the any type as in the following example:

<p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>
src/app/app.component.html
      
      <p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>
    

使用 $any() 可以防止 TypeScript 報告 bestByDate 不是 item 物件成員的錯誤。

Using $any() prevents TypeScript from reporting that bestByDate is not a member of the item object.

$any() 強制轉換函式也可以與 this 一起使用,以允許訪問元件的未宣告成員。

The $any() cast function also works with this to allow access to undeclared members of the component.

<p>The item's undeclared best by date is: {{$any(this).bestByDate}}</p>
src/app/app.component.html
      
      <p>The item's undeclared best by date is: {{$any(this).bestByDate}}</p>
    

$any() 強制轉換函式可在繫結表示式中任何進行方法呼叫的地方使用。

The $any() cast function works anywhere in a binding expression where a method call is valid.