如何使用@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>
        </divmovies. Length</ng-template>

在 Angular 17 中，我试图使用 @if @else 不要使用 || 来实现上述目标我会得到类型永远不会错误的原因。我进一步想知道我们如何才能实现这一目标。

@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

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

@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>
}