Question

我有一个“ div”，如果用户没有停车位，我想将其背景设为红色。

我试图将条件放入ngClass和ngStyle中，但没有成功

this.router.navigate(['/yourRoute'], {queryParams:{params1: null, param2: null}})

没关系，怎么办？

如果placeAttribute == null =>红色背景

如果placeAttribute == 2 =>不是红色

Answer 1

尝试一下。

[ngStyle]="{ backgroundColor: this.account && this.account.placeAttribute ? 'blue' : 'green' }"

Answer 2

尝试一下：

[ngClass]="{
             'your-css-class': your-first-condition,
              'your-css-class': your-second-condition
           }"

Answer 3

您可以执行以下任一操作：

[ngClass]="this.account.placeAttribute == null ? 'red-bg' : 'blue-bg'"

OR

在组件中创建一个方法，如下所示：

getClassNames(){
    if (this.account.placeAttribute == null){
        let classes = {
            "red-bg": true
        }
        return classes;
    }
    else{
        let classes = { 
            "blue-bg": true
        }

        return classes;
    }
}

然后在模板中：

[ngClass]="getClassNames()"

显然red-bg和blue-bg是css类，分别具有background-color: red和background-color: blue

使用ngStyle或ngClass将div设为红色

3 个答案: