*ngIf für html-Attribut in Angular2

<ion-navbar  hideBackButton >
  <ion-title> </ion-title>
  ...
  ...

Möchte ich hideBackButton werden, es bedingt und möchte ich nicht wiederholen Sie den gesamten Ionen-navbar element mit *ngIf.
Ist es möglich, sich zu bewerben *ngIf für hideBackButton-Attribut?

InformationsquelleAutor Mark Timothy | 2016-03-07

  1. 12

    Können Sie nutzen-interpolation:

    <ion-navbar [attr.hideBackButton]="someExpression">
  <ion-title> </ion-title>
  ...
...

    Wenn someExpression null ist das Attribut nicht vorhanden sein, und wenn someExpression ist ein leerer string, das Attribut wird da sein. Hier ist ein Beispiel:

    @Component({
  selector: 'my-app',
  template: `
    <div [attr.hideBackButton]="someExpression">
      Test
    </div>
    <div (click)="toggleAttribute()">Toggle</div>
  `
})
export class AppComponent {
  constructor() {
    this.someExpression = null;
  }

  toggleAttribute() {
    if (this.someExpression==null) {
      this.someExpression = '';
    } else {
      this.someExpression = null;
    }
  }
}

    Sehen diese plunkr: https://plnkr.co/edit/LL012UVBZ421iPX4H59p?p=preview

    macht Beispiel die Arbeit?
    zunächst gab es ein problem mit der Initialisierung von plunker link. aber jetzt ist es gut funktioniert.
    Ähm ja, mein Beispiel plunkr funktioniert 😉 Was meinst du mit "nicht-Beispiel"arbeiten?

    InformationsquelleAutor Thierry Templier

  2. 24

    Geben Sie null boolean-Werte für Sie zu erhalten entfernt, 

    <ion-navbar [attr.hideBackButton]="someExpression ? true : null">

    sonst eckige erstellt 

    <ion-navbar hideBackButton="false">

    InformationsquelleAutor Günter Zöchbauer

Schreibe einen Kommentar