代码之家 › 专栏 › 技术社区 › Amanite Laurine

复选框导致按钮为空

ionic2 checkbox angular html

Amanite Laurine · 技术社区 · 8 年前

由于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--;
        }
    }

一些按钮应随时显示,另一些按钮应仅在模式检查表中显示。

如果我让代码这样,应该显示的按钮总是正确显示的,但是当我进入ModeCheckList时,新显示的按钮是空的(h2没有显示…)只有带有复选框的空按钮出现
如果我完全删除复选框,所有元素在任何时候都会正确显示(但我需要复选框)
如果我删除ngif并将ngfor放在按钮标签中,问题就会消失(但我需要ngif)
我不能将ngif放在ngfor之外,因为测试是关于电流环路元素的。
如果我只从复选框中删除ngif,所有元素都是空的,当我进入ModeChecklist时,就会出现这个错误

ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。上一个值:“true”。当前值:“false”
如果我从复选框中删除ngif和ion change,则所有元素始终是空按钮

我什么都不懂,复选框有什么问题?

2 回复 | 直到 8 年前

Gabriel Barreto 8 年前

我成功地使用以下代码使其工作:

<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 div中的其余内容 item-end 或 item-content 属性

希望这有帮助。

Gowtham 8 年前

我认为问题在于 ng容器 . 当您可以简单地使用div时,为什么在这里使用ng容器

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

<ng容器> 呈现为HTML注释。所以这个角度模板:

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

将产生这种输出:

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

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