时间戳

首页 > 解决方案 > 在 HTML dom 元素变量中设置手风琴面板对象的类型

ng-bootstrap - 在 HTML dom 元素变量中设置手风琴面板对象的类型

问题描述

我有一个像这样定义的简单手风琴

<ngb-accordion>
  <ngb-panel #group>
    <ng-template ngbPanelTitle>
        <i [ngClass]="{'fa-chevron-circle-down': group?.isOpen}">

这完全符合预期。现在我已经升级到 Angular 9 并添加了严格的模板检查，它失败了，group?.isOpen因为它不知道组的类型是什么。我不知道如何#group正确分配它。

例如，对于导航，我会这样做，<nav #nav="ngbNav" ngbNav>但我无法确定面板的正确名称。

标签： ng-bootstrap

解决方案

NgbPanel 未设置 属性，因此此语法将exportAs不起作用。作为一种解决方法，我只能在组件中成像冗余功能：

panelTyped(panel): NgbPanel {
    return <NgbPanel>panel;
}

<ngb-accordion>
  <ngb-panel #group>
    <ng-template ngbPanelTitle>
        <i [ngClass]="{'fa-chevron-circle-down': panelTyped(group)?.isOpen}">

推荐阅读