Question

大家好，我想在angular 2中打开折叠的ul而不是BOOTSTRAP，我只有多个li，其中每个count span that holds a number包含another ul that is hidden by default和{{} 1}}你可以在图片中看到

接下来发生的事情当我点击任何范围counter时，它应该将变量hide从false切换为true或viseversa并且它完美地工作但是所有隐藏的uls都需要active类将ul显示为block，如下图所示

这不是我想要的。我想要的是只打开点击的li跨度并不是每个li中的所有ul我也为每个li给出了一个id，这是一个独特的，如下面的命令

<li class="list-group-item row" *ngFor="let mainTask of mainTasks; let i = index;" [id]="'ul_' + i">

这是我的文件

html

<div class="container-fluid">
    <ul class="list-group" *ngIf="mainTasks.length > 0">
        <li class="list-group-item row" *ngFor="let mainTask of mainTasks; let i = index;" [id]="'ul_' + i">
            <!-- <div class="col-lg-12"> -->
                 <div class="input-group col-lg-8">
                    <input *ngIf="mainTask.title == 'Add description'" type="text" class="form-control title_input" [placeholder]="mainTask.title">
                    <input *ngIf="mainTask.title != 'Add description'" type="text" class="form-control title_input" [value]="mainTask.title">
                </div> 
                 <div class="GroupedEntryCounter__subEntriesCount" 
                      *ngIf="mainTask.title == subTasks[i].title && subTasks[i].count > 1" 
                      (click)="hide = !hide"><span>{{subTasks[i].count}}</span></div> 
                <div class="col-lg-4">
                    <div class="input-group">
                        <input type="text" class="form-control time_input" [value]="mainTask.time">
                    </div>
                    <div class="icons">

                        <i class="fa fa-play fa-lg" aria-hidden="true" (click)="play()"></i> 
                        <i class="fa fa-times fa-lg" aria-hidden="true" (click)="deleteMainTask(i)"></i>
                    </div>
                </div>
            <!-- </div> -->
            <!-- Second Ul For hidden Li  -->
            <ul class="list-group" [ngClass]= "{'active': hide}">
                <li class="list-group-item row" *ngFor="let subTask of subTasks[i].values; let j = index;" [class.subTitle-bg]="j >= 0">
                    <div class="input-group col-lg-8">
                        <input *ngIf="subTask.title == 'Add description'" type="text" class="form-control title_input subTitle-bg" [placeholder]="subTask.title">
                        <input *ngIf="subTask.title != 'Add description'" type="text" class="form-control title_input subTitle-bg" [value]="subTask.title">
                    </div> 
                    <div class="col-lg-4">
                        <div class="input-group">
                            <input type="text" class="form-control time_input subTitle-bg" [value]="subTask.time">
                        </div>
                        <div class="icons">
                            <i class="fa fa-play fa-lg" aria-hidden="true" (click)="play()"></i> 
                            <i class="fa fa-times fa-lg" aria-hidden="true" (click)="deleteSubTask(j)"></i>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>
            <!-- <ul class="list-group" *ngIf="mainTasks.length > 0">

                <li class="list-group-item row" *ngFor="let subTask of subTasks[i].values; let j = index;">
                    <div class="input-group col-lg-8">
                        <input *ngIf="subTask.title == 'Add description'" type="text" class="form-control title_input" [placeholder]="subTask.title">
                        <input *ngIf="subTask.title != 'Add description'" type="text" class="form-control title_input" [value]="subTask.title">
                    </div>

                    <div class="col-lg-4">
                        <div class="input-group">
                            <input type="text" class="form-control time_input" [value]="subTask.time">
                        </div>
                        <div class="icons">
                            <i class="fa fa-play fa-lg" aria-hidden="true" (click)="play(subTask.title)"></i> 
                            <i class="fa fa-times fa-lg" aria-hidden="true" (click)="delete(i)"></i>
                        </div>
                    </div>
                </li>
                
            </ul> -->

这是我的css

@import url('https://fonts.googleapis.com/css?family=Cairo');
body {
    overflow-x: hidden
}
li {
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    position: relative;
    border-radius: 0px
}
li > div {
    float: left
}
li > div:last-of-type {
    height: 60px
}
.title_input {
    height: 60px;
    padding-left: 29px;
    outline: none;
    box-shadow: none;
    border: none;
    color: #CCC;
    font-family: 'Cairo', sans-serif;
    font-size: 18px;
}
.time_input {
    width: 92px;
    height: 60px;
    outline: none;
    box-shadow: none;
    border: none;
    color: #CCC;
    font-family: 'Cairo', sans-serif;
    font-size: 18px;
    position: relative;
    left: 303px
}
.icons {
    display: inline-block;
    position: relative;
    top: -40px;
    right: -421px;
}
.icons i {
    color: #CCC;
    cursor: pointer
}
.icons i:hover {
    color: #dbdbdb
}
.icons i:first-of-type {
    margin-left: -4px 
}
.GroupedEntryCounter__subEntriesCount {
    display: inline-block;
    width: 36px;
    text-align: center;
    z-index: 2
}
.GroupedEntryCounter__subEntriesCount span {
    display: inline-block;
    width: 26px;
    height: 26px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    line-height: 26px;
    text-align: center;
    color: #a3a3a3;
    cursor: pointer;
    position: absolute;
    top: 16px;
    left: 350px;
    z-index: 1000;
}

.list-group {
    margin-bottom: 0px
}
.subTitle-bg {
    background: #fcfcfc
}
.subTitle-bg .title_input {
    padding-left : 60px
}
.subTitle-bg .title_input, 
.subTitle-bg .time_input {
    font-size: 17px
}

 li > ul {
    display: none
}

li > ul.active {
    display: block
}

默认情况下，请记住变量hide = false。任何帮助将不胜感激。在此先感谢。

Answer 1

我没有使用过角度，但我可能会看到罪魁祸首：

我在您的代码中看到了(click)="hide = !hide。你不应该添加!hide = hide来切换它而不是只显示所有隐藏的吗？

这可能不正确btw。

单击角度2

1 个答案: