空按钮，因为复选框

Question

由于ngIf和ngFor不能共存，所以我放了一个ng容器来做循环。但是我做的是，没有任何逻辑，任何事情都行不通。这是代码：

视图

<ion-list *ngIf="listfavoris else loading">
<ng-container *ngFor="let favoris of listfavoris">
<button ion-item ion-long-press [interval]="500" (onPressing)="showModeCheckList(favoris)" (click)="openDocument(favoris)" *ngIf="favoris.shouldbedisplayed || ModeCheckList">
<h2>{{favoris.Nom}}</h2>
<h3>{{favoris.Description}}</h3>
<p *ngIf="favoris.Synchro == 1"><ion-icon name="sync" color="vert"></ion-icon> Dernière synchronisation le {{favoris.DateSynchro}}</p>
<p *ngIf="favoris.Synchro == 0">Pas synchronisé</p>
<ion-checkbox color="bleu" item-right [checked]="favoris.Checked" (ionChange)="toggleFavoris(favoris)"  *ngIf="ModeCheckList"></ion-checkbox>
</button>
</ng-container>
</ion-list>

控制器

showModeCheckList(favoris:FavorisModel) {
this.vibration.vibrate(100);
this.ModeCheckList = true;
this.toggleFavoris(favoris);
}
toggleFavoris(favoris: FavorisModel): void {
favoris.Checked = !favoris.Checked;
if (favoris.Checked) {
this.NbFavorisSelect++;
}
else {
this.NbFavorisSelect--;
}
}

某些按钮应随时显示，而其他一些按钮应仅在模式清单中显示。

• 如果我让代码这样，应该显示的按钮总是正确显示，但是当我进入模式检查表时，新显示的按钮是空的(h2没有显示...)只有一个带有复选框的空按钮出现

• 如果我完全删除复选框，则所有元素都可以随时正确显示(但我需要该复选框)

• 如果我删除 ngif 并将 ngfor 放在按钮标签中，问题就会消失(但我需要 ngif)

• 我不能将 ngif 放在 ngfor 之外，因为测试是关于电流环路元素的。

• 如果我只从复选框中删除 ngif，则所有元素都是空的，当我进入模式清单时，我会收到此错误

  表达式已更改之后已检查错误：表达式在检查后已更改。以前的值："true"。当前值："假">

• 如果我从复选框中删除 ngif 和离子变化，所有元素始终是空按钮

我什么都不懂，复选框有什么问题？

Answer 1

我设法让它使用以下代码：

<ion-list>
<ng-container *ngFor="let favoris of listfavoris">
<button ion-item *ngIf="ModeCheckList || favoris.shouldbedisplayed">
<ion-label>
<h2>{{favoris.Nom}}</h2>
<h3>{{favoris.Description}}</h3>
</ion-label>
<ion-checkbox item-end [checked]="favoris.Checked" (ionChange)="toggleFavoris(favoris)"  *ngIf="ModeCheckList"></ion-checkbox>
</button>
</ng-container>
</ion-list>
<button (click)="showModeCheckList(favoris)">toggle checklist mode</button>

如果不在项目内部指定<ion-label>，则项目的所有内容都放置在标签内，则可能导致问题。某些绑定未应用于您的h标记，或者复选框覆盖了它们。事实上，我无法解释为什么会发生这种情况，但是我遇到了ion-item的问题，我解决了将空ion-label和其余内容放在具有item-end或item-content属性的div中的问题。

希望这有帮助。

Answer 2

我认为问题出在ng-container上。当您可以简单地使用div 时，为什么要在这里使用 ng-container

<ng-container>是一个逻辑容器，可用于对节点进行分组，但不在 DOM 树中呈现为节点。

<ng-container>呈现为 HTML 注释。 所以这个角度模板：

<div>
<ng-container>foo</ng-container>
<div>

将产生这种输出：

<div>
<!--template bindings={}-->foo
<div>

尝试将其更改为div并尝试一下