【问题标题】:Ionic 2 segments, content disapear离子2段,内容消失
【发布时间】:2017-11-14 13:06:41
【问题描述】:

我在我的一个页面中创建了细分选项。代码如下:

<div padding>
  <ion-segment [(ngModel)]="accion">
    <ion-segment-button value="crear">
      Crear zona
    </ion-segment-button>
    <ion-segment-button value="modificar">
      Modificar zona
    </ion-segment-button>
  </ion-segment>
</div>

<ion-card center *ngIf="accion=='crear'">
  <ion-card-content>

    <ion-list>
      <ion-item>
        <ion-label floating> Nombre del area: </ion-label>
        <ion-input type="text" [(ngModel)]="nombreArea"> </ion-input>
      </ion-item>
      <ion-item>
        <label>Dispositivo asociado:</label>
        <ion-list>
          <ion-item *ngFor="let dispositivo2 of dispositivosAnadir">
            <ion-label> {{dispositivo2.name}} </ion-label>
              <ion-checkbox color="royal" [(ngModel)]="dispositivo2.selected" value="dispositivo2.value"></ion-checkbox>
          </ion-item>
        </ion-list>
      </ion-item>
    </ion-list>

    <div padding>
      <button (click)="marcarTodos()" ion-button icon-left color="royal">
        <ion-icon name="checkmark-circle"></ion-icon> Marcar todos 
      </button>
      <button (click)="desmarcarTodos()" ion-button icon-left color="royal"> 
        <ion-icon name="radio-button-off"></ion-icon> Desmarcar todos 
      </button>
    </div>

    <div padding>
      <button (click)="startShape()" [disabled]="pintando" ion-button icon-left color="royal">
        <ion-icon name="brush"></ion-icon> Pintar zona
      </button>
      <button (click)="endShape()" [disabled]="!pintando" ion-button icon-left color="royal">
        <ion-icon name="flag"></ion-icon> Fin pintar zona
      </button>
      <button (click)="cancelShape()" [disabled]="!pintando" ion-button icon-left color="royal">
        <ion-icon name="close"></ion-icon> Cancelar
      </button>
    </div>

  </ion-card-content>
</ion-card>


<ion-card center *ngIf="accion=='modificar'">
  <ion-card-content>

    <ion-list>
      <ion-item>
        <ion-label>Seleccionar zona: </ion-label>
        <ion-select [(ngModel)]="zonasSelector.seleccionada" (ionChange)="cambioZonaSeleccionada()">
          <ion-option *ngFor="let zona of zonasSelector.array" [value]="zona.value">{{zona.name}}</ion-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-list>
          <ion-item *ngFor="let dispositivo of dispositivosModificar">
            <ion-label> {{dispositivo.name}} </ion-label>
              <ion-checkbox color="royal" [(ngModel)]="dispositivo.selected" value="dispositivo.value" [disabled]="zonasSelector.seleccionada == null"></ion-checkbox>
          </ion-item>
        </ion-list>
      </ion-item>
    </ion-list>

    <div padding>
      <button ion-button icon-left (click)="modificarZona()" [disabled]="zonasSelector.seleccionada == null" color="royal"> 
        <ion-icon name="checkmark"></ion-icon> Modificar 
      </button>
      <button ion-button icon-left (click)="showConfirmDelete()" [disabled]="zonasSelector.seleccionada == null" color="royal"> 
        <ion-icon name="trash"></ion-icon> Eliminar
      </button>
    </div>

  </ion-card-content>
</ion-card>

以前,我在显示内容时没有分段并且效果很好,但是当分段引入时,我遇到了问题。问题是,在两个段上我都有一个 ngFor 来表示一组复选框,并且第一次加载页面时,检查显示得很好,但是如果我更改段,不管我选择什么,复选框都会消失。

有人知道吗?

【问题讨论】:

    标签: checkbox ionic2 segment


    【解决方案1】:

    如果有人感兴趣,我已经解决了它用 ngFor 取出离子列表并将其添加到 ion-card-content 中,而不是第一个 ion-list 中。

    <!-- SEGMENTOS -->
    <div padding>
      <ion-segment [(ngModel)]="accion">
        <ion-segment-button value="crear">
          Crear zona
        </ion-segment-button>
        <ion-segment-button value="modificar">
          Modificar zona
        </ion-segment-button>
      </ion-segment>
    </div>
    
    
    <!-- CREAR ZONA -->
    <ion-card center *ngIf="accion=='crear'">
      <ion-card-content>
    
        <ion-list>
          <ion-item>
            <ion-label floating> Nombre del area: </ion-label>
            <ion-input type="text" [(ngModel)]="nombreArea"> </ion-input>
          </ion-item>
        </ion-list>
    
        <div padding>
          <label>Dispositivo asociado:</label>
          <ion-list>
            <ion-item *ngFor="let dispositivo2 of dispositivosAnadir">
              <ion-label> {{dispositivo2.name}} </ion-label>
                <ion-checkbox color="royal" [(ngModel)]="dispositivo2.selected" value="dispositivo2.value"></ion-checkbox>
            </ion-item>
          </ion-list>
        </div>
    
        <div padding>
          <button (click)="marcarTodos()" ion-button icon-left color="royal">
            <ion-icon name="checkmark-circle"></ion-icon> Marcar todos 
          </button>
          <button (click)="desmarcarTodos()" ion-button icon-left color="royal"> 
            <ion-icon name="radio-button-off"></ion-icon> Desmarcar todos 
          </button>
        </div>
    
        <div padding>
          <button (click)="startShape()" [disabled]="pintando" ion-button icon-left color="royal">
            <ion-icon name="brush"></ion-icon> Pintar zona
          </button>
          <button (click)="endShape()" [disabled]="!pintando" ion-button icon-left color="royal">
            <ion-icon name="flag"></ion-icon> Fin pintar zona
          </button>
          <button (click)="cancelShape()" [disabled]="!pintando" ion-button icon-left color="royal">
            <ion-icon name="close"></ion-icon> Cancelar
          </button>
        </div>
    
      </ion-card-content>
    </ion-card>
    
    
    <!-- MODIFICAR ZONA -->
    <ion-card center *ngIf="accion=='modificar'">
      <ion-card-content>
    
        <ion-list>
          <ion-item>
            <ion-label>Seleccionar zona: </ion-label>
            <ion-select [(ngModel)]="zonasSelector.seleccionada" (ionChange)="cambioZonaSeleccionada()">
              <ion-option *ngFor="let zona of zonasSelector.array" [value]="zona.value">{{zona.name}}</ion-option>
            </ion-select>
          </ion-item>
        </ion-list>
    
        <ion-list>
          <ion-item *ngFor="let dispositivo of dispositivosModificar">
            <ion-label> {{dispositivo.name}} </ion-label>
            <ion-checkbox color="royal" [(ngModel)]="dispositivo.selected" value="dispositivo.value" [disabled]="zonasSelector.seleccionada == null"></ion-checkbox>
          </ion-item>
        </ion-list>
    
        <div padding *ngIf="accion=='modificar'">
          <button ion-button icon-left (click)="modificarZona()" [disabled]="zonasSelector.seleccionada == null" color="royal"> 
            <ion-icon name="checkmark"></ion-icon> Modificar 
          </button>
          <button ion-button icon-left (click)="showConfirmDelete()" [disabled]="zonasSelector.seleccionada == null" color="royal"> 
            <ion-icon name="trash"></ion-icon> Eliminar
          </button>
        </div>
    
      </ion-card-content>
    </ion-card>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-07-04
      • 2019-02-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多