【问题标题】:Ionic 2 - How to disable a button componentIonic 2 - 如何禁用按钮组件
【发布时间】:2023-03-23 08:30:01
【问题描述】:

我有一个离子组件,它由一个按钮组成,如果属性为真,则该按钮应被禁用。但是,我无法弄清楚它是如何工作的。我怎样才能让它工作?

component.html

<btn-rounded>
  <button class="ripple" [attr.disabled]="disabled">
    <div>
      {{text | translate}}
    </div>
  </button>
</btn-rounded>

组件.ts

  @Input('text') text: string;
  @Input('disabled') disabled: boolean;

  constructor() {}

index.html

  <btn-rounded text="Login" [disabled]="!this.login.valid"></btn-rounded>

谢谢你:)

【问题讨论】:

    标签: angular typescript ionic2 ionic3 angular-components


    【解决方案1】:

    你可以使用[禁用]

     <btn-rounded>
          <button class="ripple" [disabled]="disabled">
            <div>
              {{text | translate}}
            </div>
          </button>
        </btn-rounded>
    

    否则你可以这样尝试

    [attr.disabled]="disabled== true ? true : null"
    

    【讨论】:

    • 其实这是我第一次尝试的方法,但它没有按预期工作:(
    • 这不起作用"
    • 我将 [attr.disabled] 替换为 [disabled] 并且它起作用了......仅在表单登录中。但是,在某个页面上需要接受条款和条件,现在,即使它被明确禁用,我仍然可以点击并执行它的功能。仍然没有按预期工作
    • 奇怪!!你可以创建 plunker 吗?
    • 这是disabledngClick 之间的冲突,使用this 解决了
    猜你喜欢
    • 2017-06-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-09-14
    • 1970-01-01
    • 2020-10-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多