Почему в ng-контейнере с моим тегом td и элементом шаблона не отображается мой тег td?

Question

Я хочу показать td отметьте, если мое утверждение верно. Так что я использую <template> элемент для проверки этого условия. Но после рендеринга экрана я не мог видеть td тег внутри template стихия

<table class="ui-grid-row ui-row" style="width:100%; table-layout:fixed" cellspacing="0">
  <tr style="width:100%">
    <td style="width:5%" class="ui-border" [ngClass]="{ odd: odd, even: even }">{{datavalue.FieldPrefix}}</td>
    <td style="width:30%" class="ui-border" [ngClass]="{ odd: odd, even: even }">{{datavalue.FieldName}}</td>

    **//here am using template element**
    <template *ngIf="datavalue.IsOverridable">
                                        <td style="width:59%" class="ui-border" [ngClass]="{ odd: odd, even: even, highlight:datavalue.IsMandatoryElementDataMissing}"
                                            (click)="AddNewDialog(datavalue)">
                                            <span *ngIf="!datavalue.IsMultiRowExist" [innerHTML]="datavalue.FieldValueCobmination==null?'':datavalue.FieldValueCobmination"></span>
                                            <span class="grid leftalign" *ngIf="datavalue.IsMultiRowExist"><img class="image" title="Multi Line" src="assets/images/MultiLine.png" /></span>
                                        </td>
                                    </template>


  </tr>
</table>

Но работает нормально если использую <ng-container> элемент вместо <template> элемент.

<table class="ui-grid-row ui-row" style="width:100%; table-layout:fixed" cellspacing="0">
  <tr style="width:100%">
    <td style="width:5%" class="ui-border" [ngClass]="{ odd: odd, even: even }">{{datavalue.FieldPrefix}}</td>
    <td style="width:30%" class="ui-border" [ngClass]="{ odd: odd, even: even }">{{datavalue.FieldName}}</td>


    **//here am using ng-container element**
    <ng-container *ngIf="datavalue.IsOverridable">
      <td style="width:59%" class="ui-border" [ngClass]="{ odd: odd, even: even, highlight:datavalue.IsMandatoryElementDataMissing}" (click)="AddNewDialog(datavalue)">
        <span *ngIf="!datavalue.IsMultiRowExist" [innerHTML]="datavalue.FieldValueCobmination==null?'':datavalue.FieldValueCobmination"></span>
        <span class="grid leftalign" *ngIf="datavalue.IsMultiRowExist"><img class="image" title="Multi Line" src="assets/images/MultiLine.png" /></span>
      </td>
    </ng-container>


  </tr>
</table>

Вопросы: -

• Зачем ng-container действительно показывает мой td тег и template элемент не показывает мой td тег?

• Объясните когда я буду использовать ng-template вместо ng-container?

Answer 1

Вы должны использовать с ng-template как это

<ng-template [ngIf]="condition"><div>...</div></ng-template>

Разница с ng-container что вы можете использовать такие директивы, как это *ngFor для этого требуется шаблон, но он ничего не создаст в html.

<ng-container *ngFor="let item of items">{{item }}</ng-container>

но когда вы используете ng-template вам нужно будет написать в полную форму

<ng-template ngFor let-item [ngForOf]="items" let-i="index" 
   [ngForTrackBy]="trackByFn">
  <li>...</li>
</ng-template>

Смотрите также

• https://www.bennadel.com/blog/3216-template-vs-ng-container-for-grouping-dom-nodes-in-angular-2-4-4.htm