NgIf进入但不显示元素,不确定它是否显示然后被删除或根本不显示

时间:2017-06-28 21:04:20

标签: angular ionic-framework ionic2 angular-ng-if

带***的元素是给我带来问题的。我的目标是创建项目列表并填充离子项目,但只有一次,我得到它们重复,我想我可以用hall.show制作一个标志,我得到console.log,我知道show属性正在变为false。

Html文件

<ion-header>

  <ion-navbar>
    <ion-title>listaReady</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <ng-template ngFor let-item [ngForOf]="listaRdy">
      <ng-template ngFor let-hall [ngForOf]="pasillosObj">
        ***<ion-list *ngIf="item.pasillo==hall.value && hall.show">
          <ion-list-header>{{hall.name}}</ion-list-header>
          <ng-template ngFor let-articulo [ngForOf]="listaRdy">
            <ion-item *ngIf="articulo.pasillo==hall.value">{{articulo.name}}</ion-item>
          </ng-template>
        </ion-list>
        {{setToFalse(hall)}}
      </ng-template>
  </ng-template>
</ion-content>

.ts文件

import { Component,OnInit } from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import pasillo from '../../Data/pasillos';
import { Pasillo } from '../../Data/pasillo.interface';

@IonicPage()
@Component({
  selector: 'page-lista-ready',
  templateUrl: 'lista-ready.html',
})
export class ListaReadyPage implements OnInit{

  listaRdy:{name:string,pasillo:number,id:string}[];
  pasillosObj:{name:string,value:number,show:boolean}[];



  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.listaRdy=this.navParams.data;
  }
  ngOnInit(){
    this.pasillosObj=pasillo;
  }

  setToFalse(variable:Pasillo){
    const position = this.pasillosObj.findIndex((variableEl:Pasillo)=>{
      return variableEl.value == variable.value
    });
    this.pasillosObj[position].show=false;
    console.log(position);
    console.log(this.pasillosObj[position].show);
    console.log(variable);
    console.log(this.pasillosObj);
  }
}

1 个答案:

答案 0 :(得分:0)

我相信您想测试&&运算符的左侧和右侧,出于优先原因,将括号括在第一个条件周围

<ion-list *ngIf="(item.pasillo==hall.value) && hall.show">