Question

嗨，我有一组如下按钮，

let Btns: Array<any> = [{
    type: "submit",
    BtnType: "prev",
    label: "Previous",
    class: "btn-outline",
    icon: "kd-back",
    disabled: false
},
{
    type: "submit",
    BtnType: "next",
    label: "Next",
    icon: "kd-play",
    class: "btn-text",
    disabled: false
}];

我还有两个变量：

private nextBtn_disabled: boolean = false;
private prevBtn_disabled: boolean = true;

我正在为按钮实现禁用功能。行为是这样的：

上一级按钮
当满足特定条件时必须禁用下一个按钮，当用户单击上一个

以下是我的HTML：

<div class="form-group text-center">
    <button *ngFor="let btn of Btns" [type]="(btn.type=='submit')?'submit':'button'" class="btn btn-icon" [ngClass]="btn.class" (click)="_btnClick(btn, _finalConfig)" [disabled]="nextBtn_disabled">
        <i *ngIf="btn.BtnType!='next'" [class]="btn.icon"></i>
        <span>{{btn.label}}</span>
        <i *ngIf="btn.BtnType=='next'" [class]="btn.icon"></i>
    </button>
</div>

我怎样才能实现它？我在||和&&之间尝试了nextBtn_disabled条件和prevBtn_disabled条件。但没有工作。伙计们好吗？提前谢谢。

Answer 1

我会推荐这样的东西。

<button [disabled]="isInvalid()">Your html</button>

isInvalid() {
   return (checkCondition_to_be_met || clicked_on_prev_button);
}

Answer 2

像这样编码：

检查你的第二点（当满足某些条件时必须禁用下一个按钮，当用户点击上一个时也必须禁用）

Html代码：

<div>
<button *ngFor="let btn of btns" [disabled]="btn.disabled"      (click)="btnClick(btn,btns)">{{btn.label}}</button>
</div>

根据您的需要添加其他HTML代码。

组件代码：

import { Component } from '@angular/core';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
 })
export class AppComponent {


btn1 :boolean = false;
btn2 :boolean = false;

btns: Array<any> = [
    {
        type: "submit",
        BtnType: "prev",
        label: "Previous",
        class: "btn-outline",
        icon: "kd-back",
        disabled: this.btn1
    },
    {
        type: "submit",
        BtnType: "next",
        label: "Next",
        icon: "kd-play",
        class: "btn-text",
        disabled: this.btn2
    }];


    btnClick(btn,btns){

        var certain_condition = true; //put your code for any certain condition here and make it true or false.
        if((btn.label === "Previous") || certain_condition){
            console.log(btns[1]);
            btns[1].disabled = true;
        }

    }

  }

对于你的第一点make“btn1：boolean = true;” 尝试根据您的需要改变各种条件。

如何明确禁用角度按钮

2 个答案: