我有以下手风琴：NG2-引导手风琴如何创建交互式的下拉箭头

我需要箭头是这样^当手风琴开放，这样v当手风琴关闭

标记看起来像这样，注意(click)="toggleAssignedTasks()"div accordion-heading with this I toggleAssignedTasks，然后我将fontawesome向下箭头的类更改为up或up ac科丁：

<accordion class="row th-assigned-ready"> 
     <accordion-group [isOpen]="isAssignedTasksVisible" > 
      <div class="th-heading" accordion-heading (click)="toggleAssignedTasks()"> 
       <strong class="th-text-ready">Ready for Review (2)</strong> 
       <i class="fa" 
        [ngClass]="{'fa-chevron-down': isAssignedTasksVisible, 'fa-chevron-up': !isAssignedTasksVisible}" 
        aria-hidden="true"></i> 
      </div> 
      ... 
      </accordion-group> 
     </accordion>

这是工作，但是当用户点击手风琴事件得到弄糟它似乎是（点击）事件正由手风琴默认事件吸收。

我也尝试使用本地[showArrows] = “真”，在手风琴这样的：

，但我得到的错误：

Promise rejection: Template parse errors: 
Can't bind to 'showArrows' since it isn't a known native property (" 
      </div> 

      <accordion class="row th-assigned-ready" [ERROR ->][showArrows]="true" > 
       <accordion-group [isOpen]="isAssignedTasksVisible" > 
     "):

UPDATE：

toggleAssignedTasks（）看起来像这样

public toggleAssignedTasks(): void { 
    this.isAssignedTasksVisible = (this.isAssignedTasksVisible) ? false : true; 
}

来源

2016-08-16 Jeka

你可以发布'toggleAssignedTasks（）'函数吗？另外，你为什么用雪佛龙的斜体标签？最后，'showArrows'不是原生的，所以Angular正在Accordian组件上寻找一个不存在的属性，从而导致错误。如果可能的话，尝试重现你在一个笨蛋中看到的效果，并且对于某个人来说，帮助你找出错误的方法会容易得多。 – ABabin

@AndrewBabin发布更新谢谢 – Jeka

你能帮助我们更好地了解到底发生了什么问题吗？首先，在'[ngClass] =“{'fa-chevron-down'：isAssignedTasksVisible，'fa-chevron-up'：！isAssignedTasksVisible}''，你有倒下的人字形当'isAssignedTasksVisible'为true时应用类，如果为false，则应用上面的V形。这会给你与你正在寻找的东西相反（当任务可见时你想要^）。如果'isAssignedTasksVisible'具有默认值，这可能会抛出'toggleAssignedTasks（）'。 – ABabin

所以问题是，我的手风琴正在封闭手风琴组的点击，所以我解决它通过这样做：

 <accordion class="row th-assigned-ready" > 
      <accordion-group [isOpen]="isAssignedTasksVisible" (click)="onAssignedReadyClick()"> 
       <div class="th-heading" accordion-heading> 
        <strong class="th-text-ready">Ready for Review (2)</strong> 
        <i class="fa" 
         [ngClass]="{'fa-chevron-down': isAssignedTasksVisible, 'fa-chevron-up': !isAssignedTasksVisible}" 
         aria-hidden="true"></i> 
       </div> 
       <ul (click)="stopAccordionClose($event); false"> 
        //NOTICE stopAccordionClose 
       </ul> 
      </accordion-group> 
     </accordion>

，这是我component.ts的样子：

@Component({ 
    moduleId: module.id, 
    selector: "task", 
    templateUrl: "task.component.html", 
    styleUrls: ["task.scss"], 
    directives: [ 
     HeaderInternalComponent, 
     ACCORDION_DIRECTIVES, 
    ], 
}) 

export class TaskComponent extends MeteorComponent implements OnInit { 

    //more code... 


    public toggleAssignedTasks(): void { 
     this.isAssignedTasksVisible = (this.isAssignedTasksVisible) ? false : true; 
    } 

    public toggleAssignedNotComplete(): void { 
     this.isAssignedNotCompleteVisible = (this.isAssignedNotCompleteVisible) ? false : true; 
    } 

    public onAssignedReadyClick(): boolean { 
     this.toggleAssignedTasks(); 
     return false; 
    } 

    public onAssignedNotCompleteClick(): boolean { 
     this.toggleAssignedNotComplete(); 
     return false; 
    } 

    public stopAccordionClose($event): boolean { 
     $event.stopPropagation() 
     $event.preventDefault() 
     return false; 
    } 

}

来源

2016-08-17 00:39:23 Jeka

为什么不使用标准的group?.isOpen方法，如描述here：

来源

2016-09-13 21:35:17 Leyenda

NG2-引导手风琴如何创建交互式的下拉箭头

UPDATE：

回答

相关问题