清晰的堆栈视图不适用于 Angular ngTemplateOutlet答案

【问题标题】：Clarity stack-view does not work with Angular ngTemplateOutlet清晰的堆栈视图不适用于 Angular ngTemplateOutlet
【发布时间】：2019-06-12 13:29:42
【问题描述】：

我必须在同一个组件中多次显示带有Clarity's stack-view 的键值对。为避免代码重复，我想使用ng-template 和ngTemplateOutlet。

不幸的是，外部的clr-stack-block 只有在除了ngTemplateOutlet 之外还包含一个具有静态内容的附加clr-stack-block 元素时才能扩展。

请看这里：https://stackblitz.com/edit/clarity-angular-7-2ue7wd

app.component.html 包含我的示例代码，并展示了外部 clr-stack-block 只有在包含额外的静态元素时才能展开。

<ng-template #propertyList let-obj="obj" let-props="props">
    <clr-stack-block *ngFor="let prop of props">
        <clr-stack-label>{{prop}}</clr-stack-label>
        <clr-stack-content>{{ !obj[prop] ? '-' : obj[prop] }}</clr-stack-content>
    </clr-stack-block>
</ng-template>

<clr-stack-view>
    <clr-stack-block [clrSbExpanded]="true">
        <clr-stack-label>not expandable - but why?</clr-stack-label>

        <!-- don't use a 'ng-container' here as it will break the stack view -->
        <clr-stack-block
            *ngTemplateOutlet="propertyList; context: {obj: {name: 'John Doe', birthdate: '01. Jan 1970'}, props: ['name', 'birthdate']}">
        </clr-stack-block>
    </clr-stack-block>
    <clr-stack-block [clrSbExpanded]="true">
        <clr-stack-label>expandable - because of additional static block element?</clr-stack-label>

        <clr-stack-block
            *ngTemplateOutlet="propertyList; context: {obj: {name: 'Test User', birthdate: '10. Feb 2000'}, props: ['name', 'birthdate']}">
        </clr-stack-block>

        <clr-stack-block>
            <clr-stack-label><i>static</i></clr-stack-label>
            <clr-stack-content><i>clr-stack-block</i></clr-stack-content>
        </clr-stack-block>
    </clr-stack-block>
</clr-stack-view>

我无法弄清楚我在这里缺少什么。

感谢您的建议！

【问题讨论】：

标签： angular vmware-clarity

【解决方案1】：

stackview 会尝试自动检测是否有 stackblock 子项，但如果未能这样做，您可以使用 [clrSbExpandable] 输入来明确指定是否或何时应启用可扩展行为。

希望这会有所帮助！

【讨论】：

添加[clrSbExpandable]="true" 确实解决了这个问题。谢谢！

【解决方案2】：

似乎是清晰度错误。

我发现的一种解决方法是，您可以添加一个带有 CSS 属性的静态块来显示：无。这样它就不会显示出来，而且你仍然可以让它工作，直到在清晰度方面提供修复。我还建议您在他们的 github 上创建一个问题这是一个 stackblitz 示例：

https://clarity-angular-7-jaubxg.stackblitz.io

【讨论】：