Angular 17 - 在 @if 语法中，如何将函数的返回值存储在变量中并在同一个 @if 块中使用它

Question

就我而言，我有以下代码块，我可以将信息值存储在

*ngIf

表达式块中并在模板中使用，如何使用 Angular 17 中新引入的

@if

语法执行相同操作？

我找不到任何可以使用

@if

语法执行相同操作的示例/文档。

<div *ngIf="getMatchingImage() as info">
  <img class="empty-cart-img" [src]="info.imageUrl" width="70%" decoding="async" loading="lazy" alt="Empty List">
  <figcaption>
    <ng-content></ng-content>
  </figcaption>
</div>

Answer 1

对于

@if

块，语法为：

@if (<value>; as <variable>)

@if (getMatchingImage(); as info) {
  <img
    class="empty-cart-img"
    [src]="info.imageUrl"
    width="70%"
    decoding="async"
    loading="lazy"
    alt="Empty List"
  />
  <figcaption>
    <ng-content></ng-content>
  </figcaption>
}

演示@StackBlitz

参考：角度 -

@if