1

私は以下のような配列

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に表示される配列から2つのオブジェクトがあり、「defaultBackground」配列に基づいて2つの色を使用しています。

上記のコードは常に oneCardData css クラスのみを適用します。

したがって、検査要素ではoneCardDataCSSのみが表示されますが、zerocardCSSは適用されません

アップデート

trueまたはfalseを表示するために、idxのindextでhtmlパーツを更新しました。

4

3 に答える 3

0

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>

出力：

ここに画像の説明を入力

于 2016-12-23T12:42:58.250 に答える