NgIfが入力されても、要素が表示されず、表示されてから削除されるか、まったく表示されない場合

Question

***の要素が問題になります。私の目的は、アイテムリストを作成してイオンアイテムで満たしてもらうことですが、一度は重複してしまいました。私は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); 
    } 
} 

Answer 1

ファイルこの

のように最初の条件の周りに括弧を置きます

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