*ngIf表示Angular2中的html属性

Question

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

我希望hideBackButton有条件地在那里,我不想用*ngIf重复整个ion-navbar元素.是否可以为hideBackButton属性应用*ngIf？

Answer 1

您必须提供null布尔值才能删除它们,

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

否则会产生角度

<ion-navbar hideBackButton="false">

Answer 2

你可以利用插值:

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

如果someExpression为null,则该属性不存在,如果someExpression为空字符串,则该属性将存在.这是一个示例:

@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;
    }
  }
}

看到这个plunkr:https://plnkr.co/edit/LL012UVBZ421iPX4H59p ？ p = preview