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

用表达式toggle替换html中的{{ isExpanded ? '-' : '+' }}文本

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

Answer 2

您可以使用简单的字符串插值来实现此目的。但是，为了支持样式，您可能需要调整以下内容

<span [ngClass]="{ 'collapsed': !isExpanded, 'expanded': isExpanded }"> 
  {{ isExpanded ? '-' : '+' }} 
</span>

现在，您可以使用.collapsed和.expanded类来应用样式。

加号减号表示手风琴

2 个答案: