这个绑定有什么问题？(Angular 2+)

Question

更新3:

实际上我找到了导致我的代码初始问题的原因.如果我使用Ionic/Angular侦听器绑定到我的代码中的按钮 - 然后将变量for false更改为true - 确实会更改UI状态.

但是,如果我使用自定义侦听器('touchstart'),那么即使变量发生变化 - 它也不会导致UI刷新.我认为这是由角度渲染等方式起作用的.但我希望在某处记录下来.

编辑了代码片段+说明在代码片段中我们有父子组件,其中子项的发出事件需要更改父组件可见性.

编辑澄清问题更好:

在我的代码中,我有一个非常简单的组件(下面),我想让这些UI游侠在showSliders变量的布尔状态后动态显示/消失.

我验证了我在变量中获得了更新的值,但我想该视图只会在它呈现的时刻或类似的内容中读取它.

所以我再次看到UI没有显示[hidden] ="showSliders"(showSliders在这里是真的),反之亦然.

但问题是 - 如果页面已经在一个状态下呈现自己,那么动态更改变量不会导致UI出现/消失.

我有一个简单的方法来实现这一目标吗？

在javascript中,一旦得到布尔值,我可能会得到DIV的ID.style.display ="none".如何在角度2+中做同样的事情？

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ChildComponent } from '../../components/child/child'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public hidden: boolean = false; 

  constructor(public navCtrl: NavController) {

  }
  toggleButton() {
    this.hidden = !this.hidden;
    console.log(this.hidden);
  }

  getEvent($event) {
    console.log($event);
    this.hidden = $event;
  }
}

// CHILD:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child',
  template: '<button block ion-button (click)="toggleButton()">Hide Toggle (Child)</button>'
})
export class ChildComponent {

  @Output() onSomeEvent = new EventEmitter<any>();

  boolean: boolean = false;

  constructor() {
    console.log('Hello ChildComponent Component');
  }

  toggleButton() {
    this.onSomeEvent.emit(this.boolean);
    console.log("pressed Child button")
  }

}

// PARENT VIEW:

<ion-header>
  <ion-navbar>
    <ion-title>
      Just playground
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
 

  <ion-item [hidden]="hidden">
    <ion-range>
      <ion-icon range-left small name="sunny"></ion-icon>
      <ion-icon range-right name="sunny"></ion-icon>
    </ion-range>
  </ion-item>

  <button block ion-button (click)="toggleButton()">Hide Toggle (Parent)</button>
  <child (onSomeEvent)="getEvent($event)"></child>

</ion-content>



<ion-footer>
  
</ion-footer>

Answer 1

您可以简单地使用*ngIf=""结构指令.

<div *ngIf="!showSliders"> 
  <div [hidden]="bottomPanelStylesState!=='line'">
    <ion-range min="0" max="100%" pin="true" color="secondary" [(ngModel)]="svgchild.lineSlider">
      <ion-icon range-left small name="contrast"></ion-icon>
      <ion-icon range-right name="contrast"></ion-icon>
    </ion-range>
  </div>
  <div [hidden]="bottomPanelStylesState!=='fill'">
    <ion-range min="0%" max="100%" pin="true" color="secondary" [(ngModel)]="svgchild.fillSlider">
      <ion-icon range-left small name="moon"></ion-icon>
      <ion-icon range-right name="moon"></ion-icon>
    </ion-range>
  </div>
  <div [hidden]="bottomPanelStylesState!=='filter'">
    <ion-range min="0%" max="100%" pin="true" color="secondary" [(ngModel)]="svgchild.filterSlider">
       <ion-icon range-left small name="leaf"></ion-icon>
       <ion-icon range-right name="leaf"></ion-icon>
    </ion-range>
  </div>
</div>

[hidden]和之间的区别*ngIf=""是,hidden应用CSS display:hiddenprperty并*ngIf=""从DOM中删除元素.

在这里,有时使用[hidden]可能会导致问题,因为可以覆盖.这可能是个问题.