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

Question

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

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

在我的 html 中我使用了 ion-card

<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”数组的两种颜色。

上面的代码总是只应用一个CardData css 类。

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

更新

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

Answer 1

删除布尔值周围的引号

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

Answer 2

您的 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 3

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

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