Angular ngIf else 在 ng-container 中不起作用

Question

我正在尝试在 Angular12 中实现其他 ngif。但由于其他原因，部分没有得到 executed.The 问题是如果图像不为空，则它必须生成带有图像的卡片。如果图像为空，我希望卡片内有一些文字提及“图像不可用”。其他部分不是 working.can 有人引导我朝着正确的方向前进。谢谢

<ng-template [ngIf]="seasonsdetail.season?.length">
      <ng-container *ngFor = "let seasons of seasonsdetail.season">
        <div class="col-sm-2 col-md-3 col-lg-3">
          <ng-container *ngIf="seasons.image.medium; else elseTemplate">
            <div class="card" data-id='' >
                <a href= ''><img class="card-img img-fluid " [src]='seasons.image.medium' alt="Seasons"></a>
            </div>
            <h4 class="card-title">
              {{seasons.number}}
            </h4>
          </ng-container>
        </div>
        <ng-template #elseTemplate>
          <div class="card" data-id='' >
            <!--<div class="card-body"> -->
              <h4>Image not Avaliable</h4>
            <!--</div>-->
          </div>
          <h4 class="card-title">
            {{seasons.number}}
         </h4>         
        </ng-template>
      </ng-container>
    </ng-template>

Answer 1

您可以用另一个模板包装您的容器，然后您可以将 If 条件添加到 ng 模板（参见下面的示例）。

<ng-template [ngIf]="seasons.image.medium; else noImage">
   <ng-container>
      Image code here
   </ng-container>
</ng-template>

<ng-template #noImage>
  no image code here
</ng-template>

干杯！

Answer 2

问题

从问题来看，seasons.image可能为空

当seasons.image为not null时有效，因此您可以访问seasons.image.medium.

但是，当 seasons.image 为 null 并且您不处理 null 情况时，您将收到此错误并且不会生成 #elseTemplate .

ERROR Error: Cannot read property 'medium' of null

解决方案 1

您必须应用 Typescript Optional Chaining 来处理 seasons.image 的空情况。

<ng-container *ngIf="seasons.image?.medium; else elseTemplate">

完整 HTML 模板：

<ng-template [ngIf]="seasonsdetail.season?.length">
  <ng-container *ngFor="let seasons of seasonsdetail.season">
    <div class="col-sm-2 col-md-3 col-lg-3">
      <ng-container *ngIf="seasons.image?.medium; else elseTemplate">
        <div class="card" data-id=''>
          <a href=''><img class="card-img img-fluid " [src]='seasons.image.medium' alt="Seasons"></a>
        </div>
        <h4 class="card-title">
          {{seasons.number}}
        </h4>
      </ng-container>
    </div>
    <ng-template #elseTemplate>
      <div class="card" data-id=''>
        <!--<div class="card-body"> -->
        <h4>Image not Avaliable</h4>
        <!--</div>-->
      </div>
      <h4 class="card-title">
        {{seasons.number}}
      </h4>
    </ng-template>
  </ng-container>
</ng-template>

Solution 1 on StackBlitz

解决方案 2

根据您的最新评论，您尝试在同一个 ngContainer 中丢弃 #elseTemplate 和 null sessions.image 句柄。是的，你可以那样做。

并且您需要从 ngContainer.

中删除 ngIf 逻辑

<img class="card-img img-fluid " [src]='seasons.image ? seasons.image.medium : "assets/img/noimage.png">

完整HTML模板

<ng-template [ngIf]="seasonsdetail.season?.length">
  <ng-container *ngFor="let seasons of seasonsdetail.season">
    <div class="col-sm-2 col-md-3 col-lg-3">
      <ng-container>
        <div class="card" data-id=''>
          <a href=''><img class="card-img img-fluid " [src]='seasons.image ? seasons.image.medium : "assets/img/noimage.png"' alt="Seasons"></a>
        </div>
        <h4 class="card-title">
          {{seasons.number}}
        </h4>
      </ng-container>
    </div>
  </ng-container>
</ng-template>

Solution 2 on StackBlitz

Angular ngIf else 在 ng-container 中不起作用

Angular ngIf else is not working inside ng-container

angular-directive

angular

问题

解决方案 1

解决方案 2