Question

早上好。对不起这个问题的尴尬标题。

<div id="movie-image-card">
  <div class="d-flex flex-column ">
    <ng-container *ngIf="title=='Avatar' || title=='Fight Club'; then NOT_MAVEL else YES_MAVEL"></ng-container>  
        <img
              src="{{imgPath}}"
              height="300">
          <div class="title bg-success text-white">
              {{title}}
          </div>
        <ng-template #NOT_MAVEL>
            <p>THIS IS NOT MAVEL!!!!!!!!!!!!!</p>
        </ng-template>

        <ng-template #YES_MAVEL>
           <p>THIS IS MAVEL!!!!!!!!!!!!! BAD THANOS</p>
        </ng-template>
    </div>
</div>

上面的来源是电影标题和图片的来源。

电影名称包括Avartar，Fight Club，Avangers和Iron man。 Avartar和Fight Club电影不是Mavel电影，

所以我试着用下面的代码区分它们。

我希望按照img标签，div标签，p标签的顺序绘制。

但是，实际的p标签，img标签和div标签是按顺序绘制的。

<ng-template # ...>

我希望上面的代码能影响渲染顺序，但我不知道为什么。救救我！

Answer 1

这是因为* ngIf改变了使用它的容器（在这种情况下为ng-container）。而ng-template的位置与它无关。它（ng-template）可以放在整个HTML中的任何位置。

将ng-container移到img和div标记下方，以获得结果。

<div id="movie-image-card">
  <div class="d-flex flex-column ">

         <img src="{{imgPath}}" height="300">
          <div class="title bg-success text-white">
              {{title}}
          </div>

          <ng-container *ngIf="title=='Avatar' || title=='Fight Club'; then NOT_MAVEL else YES_MAVEL"></ng-container>  

        <ng-template #NOT_MAVEL>
            <p>THIS IS NOT MAVEL!!!!!!!!!!!!!</p>
        </ng-template>

        <ng-template #YES_MAVEL>
           <p>THIS IS MAVEL!!!!!!!!!!!!! BAD THANOS</p>
        </ng-template>
    </div>
</div>

此外，您不需要2 ng-template标签。更简洁的方法如下

<div id="movie-image-card">
      <div class="d-flex flex-column ">

              <img src="{{imgPath}}" height="300">
              <div class="title bg-success text-white">
                  {{title}}
              </div>

              <ng-container *ngIf="title=='Avatar' || title=='Fight Club'; else YES_MAVEL">
                        <p>THIS IS NOT MAVEL!!!!!!!!!!!!!</p>      
              </ng-container>

                <ng-template #YES_MAVEL>
                        <p>THIS IS MAVEL!!!!!!!!!!!!! BAD THANOS</p>
                </ng-template>
        </div>
</div>

为什么首先在Angular中绘制＃单词的ng-container？

1 个答案: