清晰度堆栈视图不适用于 Angular ngTemplateOutlet

Question

我必须在同一组件中多次显示带有 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>

我不知道我在这里遗漏了什么。

感谢您的指教！

Answer 1

似乎是一个清晰度错误。

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

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

Answer 2

stackview 会尝试 auto-detect 如果有 stackblock 子级，但如果失败，您可以使用 [clrSbExpandable] 输入明确指定是否或何时应启用可扩展行为。

希望对您有所帮助！

清晰度堆栈视图不适用于 Angular ngTemplateOutlet

Clarity stack-view does not work with Angular ngTemplateOutlet

angular

vmware-clarity