【问题标题】:NgIf enters but it doesn't show the element, not sure if it shows and then get deleted or don't show at allNgIf进入但它不显示元素,不确定它是否显示然后被删除或根本不显示
【发布时间】:2017-06-28 21:04:20
【问题描述】:

带有 *** 的元素是给我带来问题的元素。我的目标是创建项目列表并填充离子项目,但只有一次,我让它们重复,我想我可以用 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);
  }
}

【问题讨论】:

  • 尝试删除ngIf。项目是否显示?

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


【解决方案1】:

我相信您想测试 &amp;&amp; 运算符的左侧和右侧,出于优先考虑,请在第一个条件周围放置括号

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

【讨论】:

  • 注意改变,我得到一个空白页
猜你喜欢
  • 2021-11-07
  • 2014-06-20
  • 1970-01-01
  • 1970-01-01
  • 2012-11-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-10
相关资源
最近更新 更多