如何在Ionic的page.html中根据变量匹配字符串禁用元素？

问题说明 #

需要在ch变量为'user'或'todo'时，禁用以下<ion-item>元素：

<ion-item>
      <ion-label position="stacked">Url</ion-label>
      <ion-input type="text" value="{{data.url}}" [(ngModel)]="data.url" ></ion-input>
</ion-item>

错误写法分析 #

你之前的两种写法都不符合Angular语法规则：

• 不能在[disabled]属性绑定中使用if语句，属性绑定需要直接传入布尔值或返回布尔值的表达式
• 不能将*ngIf（用于添加/移除DOM元素的结构指令）和[disabled]（用于控制元素状态的属性绑定）混写在同一个属性里

正确实现方式 #

方式1：模板内直接写布尔表达式 #

直接在[disabled]中传入判断表达式，同时注意[(ngModel)]已实现双向绑定，无需重复写value="{{data.url}}"：

<ion-item [disabled]="ch === 'user' || ch === 'todo'"> 
      <ion-label position="stacked">Url</ion-label>
      <ion-input type="text" [(ngModel)]="data.url"></ion-input>
</ion-item>

方式2：将判断逻辑抽离到组件TS文件 #

如果后续判断逻辑可能变复杂，建议把判断逻辑放到组件TypeScript代码中，通过getter方法返回布尔值，让模板更简洁：

组件TS代码：

// ch为组件类中的成员变量
ch: string;

get shouldDisableUrlItem(): boolean {
  return this.ch === 'user' || this.ch === 'todo';
}

模板代码：

<ion-item [disabled]="shouldDisableUrlItem"> 
      <ion-label position="stacked">Url</ion-label>
      <ion-input type="text" [(ngModel)]="data.url"></ion-input>
</ion-item>

补充：如果需要隐藏元素而非禁用 #

若需求是当ch为'user'或'todo'时完全隐藏该元素，才需要使用*ngIf：

<ion-item *ngIf="!(ch === 'user' || ch === 'todo')"> 
      <ion-label position="stacked">Url</ion-label>
      <ion-input type="text" [(ngModel)]="data.url"></ion-input>
</ion-item>

内容的提问来源于stack exchange，提问作者user20291198