手风琴的加减号

Question

我在我的 Angular 7 应用程序中使用 css 实现了一个手风琴，需要将切换文本更改为图像或内容，显示 + 符号表示折叠和 - 表示展开。我如何做到这一点。我暂时写了切换文本。这需要替换为 + 和 - 符号。请注意我有 scss 样式表。我以后应该可以更改标志的颜色。我已经创建了 stackbitz

https://stackblitz.com/edit/angular-vxtfpi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="card">
    <div class="card-header panel-heading">
        <span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Classes</span>

        <a class="pull-right" [ngClass]="{'collapsed': !isExpanded}" data-toggle="collapse" href="javascript:void(0);" (click)="expand()" role="button"
            [attr.aria-expanded]="isExpanded" aria-controls="nva"> Toggle
        </a>


    </div>
  <div [ngClass]="{'show': isExpanded}" id="nva" class="collapse" role="tabpanel" aria-labelledby="nva_heading" data-parent="#nva"
    [attr.aria-expanded]="isExpanded">
<div class="card-body">

    <div class="form-group row">
        <label for="inputName" class="col-md-2 " style="font-weight: bold">Name</label>
                <div class="col-md-2" style="border: 1px">

                    <kendo-dropdownlist style="width:100%" 
                        class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                        [valuePrimitive]="true" valueField="Id" >
                    </kendo-dropdownlist>
                </div>

                <label for="inputEmail" class="col-md-2"  style="font-weight: bold">NAV Reporting Cycle</label>
                <div class="col-md-2">

                    <kendo-dropdownlist  style="width:100%" class="form-control form-control-sm"
                        [data]="ReportingCycle"  [filterable]="false"
                        [textField]="'Name'" [valuePrimitive]="true" [valueField]="'Id'">
                    </kendo-dropdownlist>

                </div>

                <label for="inputTitle" class="col-md-2"  style="font-weight: bold">Plan Asset Fund</label>
                <div class="col-md-2">


                    <label  style="font-size: 13px;font-weight: normal;cursor: pointer">
                        <input type="checkbox"  style="width: 13px; height: 13px;" />
                        Yes </label>
                </div>
  </div>

        <div class="form-group row">
        <label for="inputName" class="col-md-2 " style="font-weight: bold">Name</label>
                <div class="col-md-2" style="border: 1px">

                    <kendo-dropdownlist style="width:100%" 
                        class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                        [valuePrimitive]="true" valueField="Id" >
                    </kendo-dropdownlist>
                </div>

                <label for="inputEmail" class="col-md-2"  style="font-weight: bold">NAV Reporting Cycle</label>
                <div class="col-md-2">

                    <kendo-dropdownlist  style="width:100%" class="form-control form-control-sm"
                        [data]="ReportingCycle"  [filterable]="false"
                        [textField]="'Name'" [valuePrimitive]="true" [valueField]="'Id'">
                    </kendo-dropdownlist>

                </div>

                <label for="inputTitle" class="col-md-2"  style="font-weight: bold">Plan Asset Fund</label>
                <div class="col-md-2">


                    <label  style="font-size: 13px;font-weight: normal;cursor: pointer">
                        <input type="checkbox"  style="width: 13px; height: 13px;" />
                        Yes </label>
                </div>
  </div>        
</div>
</div>
</div>

Answer 1

只需将 html 中的 toggle 文本替换为表达式 {{ isExpanded ? '-' : '+' }}

https://stackblitz.com/edit/angular-apwdpt