角度材质(组件)中的条件按钮颜色属性

时间:2019-09-16 20:16:27

标签: angular angular-material conditional-statements angular-components

我有一个接受输入的组件。@Input() coDeliveryCandidates: DeliverySlotView[];

这在模板中使用:

<ng-container *ngFor="let coDeliverySlotView of (coDeliveryCandidates | async)">
  <button
    mat-raised-button
    [color]=""
  >
    {{ label  }}
  </button>
</ng-container>

color属性将字符串作为值,我想做类似的事情:

[color]="{
  black: coDeliverySlotView.slotId === bookedSlot.slotId,
  grey: !coDeliverySlotView.slotId === bookedSlot.slotId
}"

在这里,我使用与ngClass相同的语法,但是我猜不支持该语法。.那么还有其他类似的方法吗? :)

3 个答案:

答案 0 :(得分:2)

可以只使用三元运算符

[color]="coDeliverySlotView.slotId === bookedSlot.slotId ? 'black' : 'grey'"

答案 1 :(得分:0)

材料设计内置了三种颜色,分别称为primary,accent,warn和base,您传递给color的值将设置need类,在这种情况下,更改颜色的简便方法是定义一个类而不设置color属性

style.scss

.black {
  &.mat-raised-button.mat-button-base {
    background: black ;
    color:#fff ;
  }
}

.gray {
  &.mat-raised-button.mat-button-base {
    background: #ccc ;
    color:#555 ;
  }
}
.orange {
  &.mat-raised-button.mat-button-base {
    background: orange ;
    color:#fff ;
  }
}

模板

<button mat-raised-button class="black">black</button>
<button mat-raised-button class="gray">gray</button>
<button mat-raised-button class="orange">orange</button>

通过ngClass指令和boolean属性设置条件的类基础

 <button mat-raised-button 
        [ngClass]="{'black': isBlack , 'gray' : !isBlack}" (click)="isBlack =!isBlack" >
        click to toggle
 </button>

demo ??

答案 2 :(得分:0)

import java.util.Scanner;
import java.lang.*;


public class Practice1 {
    public static void main(String[] args) {
        Scanner input = new Scanner(System.in);

        // These lines welcome the user and prompt them to choose
        // the action they want to do with their account.
        System.out.println("Hello user!");
        System.out.println("What would you like to do with the account?");
        System.out.println("Enter one of the following choices: ");
        System.out.println(" - 1 to check your balance.");
        System.out.println(" - 2 to make a deposit.");
        System.out.println(" - 3 to make a withdrawal.");
        System.out.println(" - 4 to exit the program.");
        System.out.print("Your choice: ");
        int choice = input.nextInt();
        System.out.print("\n");


        // declare a variable that stores our initial balance, deposit and
        // the amount that we'd like to withdraw from our account.
        double balance = 300;
        double deposit;
        double withdraw;
        boolean checkAlp1 = Character.isAlphabetic(choice);

        // initiate a while loop. As long as the user's choice
        // is not the number 4, the loop will continue.
        while (choice != 4) {

            // if the user inputs number 1, then print out his balance.
            if (choice == 1) {
                System.out.println("Your balance is $" + balance + ".");
            }

//I need help here .........
            else if (checkAlp1) {
                System.out.println("Please enter a number.");
            }
            // otherwise, if the user inputs 2, then ask them how much
            //they want to deposit. Store their input in a variable called deposit.
// if the user enters 2, ask them how much they want to deposit.
            else if (choice == 2) {
                System.out.print("Enter the amount you would like to deposit: ");
                deposit = input.nextDouble();

                //if the deposit is negative number to zero, then print "Invalid" message.
                if (deposit <= 0) {
                    System.out.println("Please enter an amount greater than 0.");
                }
//otherwise increment the balance by how much the user deposits
                else {
                    balance += deposit;
                }
                System.out.print("\n");
//show the balance after updating it.
                System.out.println("Your balance is now $" + balance + ".");
            }
//if the user enters number 3, then ask them how much they want to withdraw
            else if (choice == 3) {
                System.out.println("Enter the amount you would like to withdraw: ");
                withdraw = input.nextDouble();

// if the amount they withdraw is greater than zero and it's less or equal
// to the value of the balance
// then check to make sure there is not only $30 left in the account
//if so, then tell the user not enough funds.
                if (withdraw > 0 && withdraw <= balance) {
                    if (balance - withdraw < 30) {
                        System.out.println("no enough funds");
                    }
//otherwise subtract how much the user wants out of the balance.
//then print out how much the user withdrew.
                    else {
                        balance -= withdraw;
                        System.out.println("You withdrew $" + withdraw + ".");
                    }
                }

// if the amount the user tries to withdraw is less or equal to zero
//print invalid.
                else if (withdraw <= 0) {
                    System.out.println("Invalid entry. Please try again");
                }
                System.out.print("\n");
                System.out.println("Your current balance is $" + balance + ".");
            }
// if the user enters 4, then exit the program
            else if (choice == 4) {
                break;
            }
            System.out.println(" ");
            System.out.println("What would you like to do with the account?");
            System.out.println("Enter one of the following choices: ");
            System.out.println(" - 1 to check your balance.");
            System.out.println(" - 2 to make a deposit.");
            System.out.println(" - 3 to make a withdrawal.");
            System.out.println(" - 4 to exit the program.");
            System.out.print("Your choice: ");
            choice = input.nextInt();
            System.out.print("\n");

        }
// print this statement.
        System.out.println("Exiting the program.");

    }
}

这是一个使用材料颜色的简单示例。