Winkel-2 ein-und ausblenden von Elementen über *ngIf mit boolean

Möchte ich zeigen und verstecken ein element mit einer Schaltfläche, die sich in einer anderen Komponente.

Also ich habe ein Armaturenbrett mit einem Betrag von Kammern und einen header.

HTML-von DashboardComponent mit app-header und app-Kammer: 

 <app-header></app-header>
    <div class="container">
      <div class="row">
        <app-chamber [kamers]="kamers"></app-chamber>
      </div>
    </div>

Habe ich diese HTML-wth *ngIf in meinem ChamberComponent: 

<div class="col-sm-6 col-md-4 col-lg-3 cardcol" *ngFor="let kamer of kamers; let i = index">
      <md-card class="chamber wit" *ngIf="kamer.patient == null">
         <p *ngIf="showId">{{kamer.id}}</p>
      </md-card>
</div>

In der HeaderComponent ich habe eine Schaltfläche, muss zum ein-und ausblenden des Elementes :

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  @Input() aList;

  dashboardComponent:DashboardComponent;

  chamberComponent:ChamberComponent;

  constructor(dashboardComponent: DashboardComponent, chamberComponent:ChamberComponent) {
    this.dashboardComponent = dashboardComponent;
    this.chamberComponent = chamberComponent;

  }

  ngOnInit() {

  }

//THIS GETS CALLED BY A BUTTON CLICK
  toggleId(){
    this.chamberComponent.toggleId();
  }

}

dann meine ChamberComponent code:

@Component({
  selector: 'app-chamber',
  templateUrl: './chamber.component.html',
  styleUrls: ['./chamber.component.css']
})
      export class ChamberComponent implements OnInit {

      @Input() kamers;
      showId:boolean;

      constructor() {
        this.showId=false;
      }

      ngOnInit() {

      }

      toggleId = () => {
          this.showId = !this.showId;
      }

    }

So, wenn ich auf die Schaltfläche klicke, ändert sich der Wert (ich habe protokolliert dies in der Konsole), aber die Ansicht nicht aktualisiert..

Wenn ich ein button in meine ChamberComponent, ruft die toggleId () - Funktion die Ansicht keine reveice ein update und das element ein-oder ausgeblendet ist.

Aber ich muss Umschalten über eine Taste auf meinem Kopf.

Mögliche Duplikate von Winkel-2 ein-und Ausblenden eines Elements
Das Duplikat wurde über "dies" in eine callback-Umfang. Aber mein code sollte die Arbeit nach, Beispiel. diese.showId nicht funktioniert..
Wenn es nicht angezeigt oder verborgen, und Sie haben keine anderen Inhalte gibt, sind Sie sicher, dass die Bedingung *ngIf="kamer.patient == null" erfüllt ist?
Das ist das problem, und dies sollte sehr viel Hinzugefügt werden zu der Frage es ist sehr wichtig Informationen! So setzen Sie alle zugehörigen code posten bitte! 🙂
Ich habe aktualisiert die Frage, vielen Dank!

InformationsquelleAutor Sytham | 2016-12-26

  1. 11

    Plunker

    Gab es eine kleine Diskrepanz zwischen der @Input() kamers und die Vorlage *ngIf="kamer.patient == null".

    • Ändern Sie einfach die Eingabe kamer.

    Vorlage HTML

    <md-card class="chamber wit" *ngIf="kamer.patient === null">
   <p *ngIf="showId">{{kamer.id}}</p>
</md-card>

<button (click)="toggleId()">Toggle</button>

    Komponente

    @Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  kamer = {
    patient: null,
    id: '1'
  };
  showId = false;

  ngOnInit() {

  }

  toggleId() {
    this.showId = !this.showId;
  }

}

    Update (1) - Plunker (1)

    Verwenden @ViewChild

    Verweis zu einer Kind-Komponente, die Funktionen verwenden ViewChild

    • Ort @ViewChild('child') child; in der übergeordneten Komponente
    • In der übergeordneten Vorlage Referenz untergeordnete Funktionen wie diese: <button (click)="child.toggleId()">Toggle</button>

    Übergeordneten Komponente

    @Component({
  selector: 'material-app',
  template: `
    <material-child #child></material-child>
    <button (click)="child.toggleId()">Toggle</button>
  `
})
export class AppComponent {

  @ViewChild('child') child;

}

    Kind Vorlage

    <md-card class="chamber wit" *ngIf="kamer.patient === null">
   <p *ngIf="showId">{{kamer.id}}</p>
</md-card>

    Kind Komponente

    @Component({
  selector: 'material-child',
  templateUrl: 'app.component.html'
})
export class ChildComponent {

  kamer = {
    patient: null,
    id: '1'
  };
  showId = false;

  ngOnInit() {

  }

  toggleId() {
    this.showId = !this.showId;
  }

}

    Update (2) - Plunker (2)

    Verwenden @Output() + EventEmitter

    Erweitern die vorherigen Einstellungen zu verwenden, Geschwister-Komponente können Sie

    • Haben die Geschwister Strahlen eine Veranstaltung mit einem EventEmitter
    • Hören der emittierten Ereignis in der übergeordneten Komponente und rufen Sie die Kind-Funktion benötigt ViewChild

    Geschwister-Komponente

    @Component({
  selector: 'material-sibling',
  template: `
    <button (click)="toggle.emit()">Toggle</button>
  `
})
export class SiblingComponent {
  @Output() toggle = new EventEmitter();
}

    Übergeordneten Komponente

    @Component({
  selector: 'material-app',
  template: `
    <material-child #child></material-child>
    <material-sibling (toggle)="child.toggleId()"></material-sibling>
  `
})
export class AppComponent {

  @ViewChild('child') child;

}

    Kind Vorlage

    <md-card class="chamber wit" *ngIf="kamer.patient === null">
   <p *ngIf="showId">{{kamer.id}}</p>
</md-card>

    Kind Komponente

    @Component({
  selector: 'material-child',
  templateUrl: 'app.component.html'
})
export class ChildComponent {

  kamer = {
    patient: null,
    id: '1'
  };
  showId = false;

  ngOnInit() {

  }

  toggleId() {
    this.showId = !this.showId;
  }

}
    Vielen Dank für Ihre Zeit, ich habe aktualisiert die Frage mit mehr info. Also im Grunde, wenn ich Folgen Ihr raten, ich habe 2 Kinder (app -, Kammer-und app-header) der DashboardComponent. Nun Ihr Beispiel zeigt, wie eine Funktion aufzurufen, die des Kindes gegenüber den Eltern. Ich brauche eine Funktion aufzurufen, die von einem Kind zu einem anderen Kind.
    Vielleicht die beste/einfachste Lösung ist einfach den header in der dashboard-html und Mach es so wie du gesagt hast?
    Okay, ich denke ich habe es für die Geschwister setup.. lass es mich wissen, wenn Sie etwas anderes benötigen, Dank!
    Sie sir, sind ein held!
    Vielen Dank, bin froh, dass es geholfen hat!

    InformationsquelleAutor adriancarriger

Schreibe einen Kommentar