为什么 ng-container 显示我的 td 标签和模板元素不显示我的 td 标签？

Question

如果我的陈述属实，我想显示 td 标签。所以我正在使用 <template> 元素来检查该条件。 但是在渲染屏幕后我无法在 template 元素中看到 td 标签。

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

问题：-

Why ng-container does show my td tag and template element does not shows my td tag?

Explain when I would use ng-template instead of 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

为什么 ng-container 显示我的 td 标签和模板元素不显示我的 td 标签？

Why ng-container showing my td tag and template element does not showing my td tag?

javascript

html

angular

angular2-template

ng-container

问题：-