Angular 17 - 如何使用 @if @else

Question

我正在尝试将代码指令从 Angular 16 转换为 Angular 17。但是，我无法在 Angular 17 中实现引用，因此对于其他指令，它将引用相同的 ng-template。

<div *ngIf="movies; else noTracks">
    <div *ngIf="movies.length>0; else noTracks">
        <h6 class="m-b-20 m-t-40 p-b-5 b-b-default f-w-600">Favorites</h6>
        <div class="row">
            <div class="col-sm-6">
                <p class="m-b-10 f-w-600">Recent</p>
                <h6 class="text-muted f-w-400">{{movies[movies.length-1].title}}
                    -
                    {{movies[movies.length-1].rating}}</h6>
            </div>
            <div class="col-sm-6">
                <p class="m-b-10 f-w-600">Total</p>
                <h6 class="text-muted f-w-400">{{ movies.length}}</h6>
            </div>
        </div>
    </div>
</div>

<ng-template #noTracks>
    <h6 class="m-b-20 m-t-40 p-b-5 b-b-default f-w-600">Favorites</h6>
    <div class="row">
        <div class="col-sm-6">
            <p class="m-b-10 f-w-600">Recent</p>
            <h6 class="text-muted f-w-400">NA</h6>
        </div>
        <div class="col-sm-6">
            <p class="m-b-10 f-w-600">Total</p>
            <h6 class="text-muted f-w-400">0</h6>
        </div>
    </div>
</ng-template>

在 Angular 17 中，我尝试使用

@if

和

@else

来实现上述目标，而不使用

||

因为我永远不会得到类型错误。此外，我想知道我们如何才能实现这一目标。

注意： 不要组合

@if

语句。

@if (movies) {
  @if (movies.length>0) {
    <h6 class="m-b-20 m-t-40 p-b-5 b-b-default f-w-600">Favorites</h6>
    <div class="row">
      <div class="col-sm-6">
        <p class="m-b-10 f-w-600">Recent</p>
        <h6 class="text-muted f-w-400">{{movies[movies.length-1].title}}
            -
            {{movies[movies.length-1].rating}}</h6>
      </div>
      <div class="col-sm-6">
        <p class="m-b-10 f-w-600">Total</p>
        <h6 class="text-muted f-w-400">{{ movies.length}}</h6>
      </div>
    </div>
  } @else {
    <h6 class="m-b-20 m-t-40 p-b-5 b-b-default f-w-600">Favorites</h6>
    <div class="row">
      <div class="col-sm-6">
        <p class="m-b-10 f-w-600">Recent</p>
        <h6 class="text-muted f-w-400">NA</h6>
      </div>
      <div class="col-sm-6">
        <p class="m-b-10 f-w-600">Total</p>
        <h6 class="text-muted f-w-400">0</h6>
      </div>
    </div>
  }
}

Answer 1

基本上

*ngIfElse

语法与

@if

@else

语句相同。

noTracks

<ng-template>

保留，要渲染模板，您需要带有

<ng-container>

的

[ngTemplateOutlet]

元素。

@if (movies) { 
  @if (movies.length > 0) {
    ...
  } @else { 
    <ng-container [ngTemplateOutlet]="noTracks"></ng-container>
  } 
} @else { 
  <ng-container [ngTemplateOutlet]="noTracks"></ng-container>
} 

确保您已在组件中导入了

CommonModule

或

NgTemplateOulet

。

演示@StackBlitz

请注意，我更喜欢将两个

@if

语句组合成一个

@if

，这可以简化（其他）模板。由于帖子所有者要求将现有结构维护为

*ngIfElse

语法，所以我写了这个答案。

Answer 2

只需合并案例（您可以在之前的版本中完成）：

@if (movies && movies.length > 0) {
<h6 class="m-b-20 m-t-40 p-b-5 b-b-default f-w-600">Favorites</h6>
<div class="row">
    <div class="col-sm-6">
        <p class="m-b-10 f-w-600">Recent</p>
        <h6 class="text-muted f-w-400">{{movies[movies.length-1].title}}
            -
            {{movies[movies.length-1].rating}}</h6>
    </div>
    <div class="col-sm-6">
        <p class="m-b-10 f-w-600">Total</p>
        <h6 class="text-muted f-w-400">{{ movies.length}}</h6>
    </div>
</div>
} @else {
<h6 class="m-b-20 m-t-40 p-b-5 b-b-default f-w-600">Favorites</h6>
<div class="row">
    <div class="col-sm-6">
        <p class="m-b-10 f-w-600">Recent</p>
        <h6 class="text-muted f-w-400">NA</h6>
    </div>
    <div class="col-sm-6">
        <p class="m-b-10 f-w-600">Total</p>
        <h6 class="text-muted f-w-400">0</h6>
    </div>
</div>
}