Wie explizit Tasten deaktivieren Winkel

Question

Hallo Ich habe eine Reihe von Tasten, wie unten,

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

Auch ich habe zwei Variablen:

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

ich ein Sperrmerkmal, um die Tasten bin der Umsetzung. Das Verhalten ist so etwas wie dieses:

1. i.Vj. Taste deaktiviert werden muss, wenn die Seite geladen wird
2. nächste Taste muss deaktiviert werden, wenn treffen bestimmte Bedingung auch wenn der Benutzer klicken zurück

muss deaktiviert sein Das folgende ist mein 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> 

Wie kann ich es erreichen? Ich versuchte || Zustand und && Zustand zwischen nextBtn_disabled und prevBtn_disabled. Aber hat nicht funktioniert. Irgendwelche Ideen Jungs? Danke im Voraus.

Answer 1

Ich würde so etwas empfehlen.

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

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

Answer 2

-Code es wie folgt aus:

überprüfen Sie es für Ihren zweiten Punkt (nächste Taste muss deaktiviert werden, wenn bestimmte treffen Zustand auch wenn der Benutzer klicken i.Vj. muss deaktiviert sein)

Html-Code:

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

Fügen Sie anderen HTML-Code nach Ihren Bedürfnissen hinzu.

Komponentencode:

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

    } 

    } 

Für Ihren ersten Punkt machen "btn1: boolean = true;" Versuchen Sie, verschiedene Bedingungen entsprechend Ihren Bedürfnissen zu ändern.