Question

我的项目中有一个ng容器，该容器应根据特定属性显示/隐藏HTML的一部分。

当属性最初为false并随后将其设置为true时，ng-container内部的内容将按预期显示。但是，当该属性最初为true时-内容不会显示。

HTML代码：

<ion-item>
  <ng-container *ngIf="prop">
  <ion-item>
    <ion-label stacked  [innerHTML]="htmlString"></ion-label>
    <ion-checkbox (click)="checkboxClick($event)"></ion-checkbox>
  </ion-item>
  </ng-container>
  </ion-item>

此处是EXAMPLE的初始属性为false。更改为true时，将显示内容。

此处是EXAMPLE初始属性为true。而且什么都没有显示。

如果该值最初为true，可以怎么显示内容？

Answer 1

好，所以问题在于您需要定义ng容器包含离子项目的内容。

Working stackblitz

Documented on the ionic framework site.

<ion-item>
  <ng-container *ngIf="prop" item-content> <!-- this right here -->
    <ion-item>
      <ion-label stacked  [innerHTML]="htmlString"></ion-label>
      <ion-checkbox (click)="checkboxClick($event)"></ion-checkbox>
    </ion-item>
  </ng-container>
</ion-item>

Answer 2

问题在于ion-item如何呈现其模板。因为您的容器中有ion-label，所以父级ion-item假定您的项目内容在模板上的ion-label中；因此忽略其余所有内容。

所以问题实际上不是ng-container而是ion-item本身，当它以prop=false开头时，直到角度检测发生变化并构建代码的这一特定部分时才呈现;因此ion-item的构建正确。但是当true ion-item开始时，它本身就将其丢弃。

整个ion-item模板：

template:
    '<ng-content select="[item-start],[item-left],ion-checkbox:not([item-end]):not([item-right])"></ng-content>' +
    '<div class="item-inner">' +
      '<div class="input-wrapper">' +
        '<ng-content select="ion-label"></ng-content>' +
        '<ion-label *ngIf="_viewLabel">' +
          '<ng-content></ng-content>' +
        '</ion-label>' +
        '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
      '</div>' +
      '<ng-content select="[item-end],[item-right],ion-radio,ion-toggle"></ng-content>' +
      '<ion-reorder *ngIf="_hasReorder"></ion-reorder>' +
    '</div>' +
'<div class="button-effect"></div>'

ion-item.ts line 274

如下所示，它将查找ion-label（第一行select="ion-label"），如果找到了它，则将其用作项目的内容，否则将创建一个新的{ {1}}，其中包含您ion-label的内容（ion-item）。

ng-content模板的相关部分：

ion-item

最后，这只是组件之间的冲突，因为您正在另一个内部使用'<ng-content select="ion-label"></ng-content>' + '<ion-label *ngIf="_viewLabel">' + '<ng-content></ng-content>' + '</ion-label>' + '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +。

在解决此问题的方法上，使用ion-item（如@Jacques的建议），它将使该插槽被前面描述的第三个插槽捕获，该插槽选择<ng-container *ngIf="prop" item-content>作为目标而不丢失尽管您的孩子[item-content]上有ion-label，但内容仍然如此。

ion-item

免责声明：我只给出我的答案，因为先前的答案不能解释为什么会发生这种情况，因此请考虑补充。

带有* ngIf指令的ng-container意外行为

2 个答案: