如何使用 ngClass 为离子卡应用边框颜色

Question

我是一个像下面这样的数组

this.defaultBackground=[{"applyBackground":"true"},{"applyBackground":"false"}];

在我的 html 我用过离子卡

<div *ngFor="let details of addressArray; let idx = index" 
    [ngClass]="defaultBackground[idx].applyBackground ? 'zerocard':'oneCardData' ">
   <ion-card></ion-card>
</div>

这是我的 css 代码

.zerocard{
        .card-ios {
            margin: 12px 12px 12px 0px;
            border: 1px solid $green-color !important;
        }

        .card-md {
            margin: 12px 12px 12px 0px;
            border: 1px solid $green-color !important;
        }

                ion-col[width-80]{
            padding-left: 15px;
            font-family: $font-roboto;
            font-weight: bold;
            color: gray;
        }
        ion-col[width-20]{
            ion-icon{
                color:gray;
                padding-left: 15px;
            }
        }

        ion-card{
            width: 100%;
        }

        ion-card-header{
            padding: 0px;
        }

        ion-card-content{
            ion-row p {
                color:black;
                margin-bottom: -5px;
            }
            ion-row{

                ion-col{
                    margin-bottom: -14px;
                    margin-left: -5px;
                    margin-top: -5px;
                }
                ion-col[width-80]{
                    text-align: left;
                    padding-left: 0px;
                }
                ion-col[width-20]{
                    text-align: right;
                }
            }   
        }
    }

    .oneCardData{
        .card-ios {
            margin: 12px 12px 12px 0px;
            //border: 1px solid $green-color !important;
        }

        .card-md {
            margin: 12px 12px 12px 0px;
            //border: 1px solid $green-color!important;
        }

        ion-col[width-80]{
            padding-left: 15px;
            font-family: $font-roboto;
            font-weight: bold;
            color: gray;
        }
        ion-col[width-20]{
            ion-icon{
                color:gray;
                padding-left: 15px;
            }
        }

        ion-card{
            width: 100%;
        }

        ion-card-header{
            padding: 0px;
        }

        ion-card-content{
            ion-row p {
                color:black;
                margin-bottom: -5px;
            }
            ion-row{

                ion-col{
                    margin-bottom: -14px;
                    margin-left: -5px;
                    margin-top: -5px;
                }
                ion-col[width-80]{
                    text-align: left;
                    padding-left: 0px;
                }
                ion-col[width-20]{
                    text-align: right;
                }
            }   
        }

    }

我的数组中有两个对象显示在我的 ui 卡中我使用了基于 'defaultBackground' 数组的两种颜色。

以上代码始终只应用 oneCardData css class.

所以在我的检查元素中我只看到 oneCardData css 但我的 zerocard css 没有应用

更新

用 idx 的 indext 更新了我的 html 部分以获得显示真或假。

Answer 1

看来你的html不合适，请更新你的html如下：

<style>
    .zerocard {
        background-color:red;
        color:white;
    }
     .oneCardData {
        background-color:blue;
        color:white;
    }
</style>

<div *ngFor="let item of defaultBackground">
    <div [ngClass]="item.applyBackground=='true' ? 'zerocard':'oneCardData' " style="height:50px;">
        {{item.applyBackground}}
    </div>
</div>

输出：

Answer 2

删除布尔值两边的引号

this.defaultBackground=[{"applyBackground": true},{"applyBackground": false}];

Answer 3

在CSS中很简单。如果我们使用 box-shadow:none; 它不会显示边框颜色。如果我们使用填充，那么它就可以工作。

ion-card{
     box-shadow: none;
     border: black;
     background-color: white;
     border-radius: 5px;
     padding:15px;
}

如何使用 ngClass 为离子卡应用边框颜色

how to apply border color for ion-card using ngClass

angular

sass

ionic2

ng-class

angular-ng-class