Question

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

不幸的是，外部clr-stack-block仅在包含clr-stack-block以外的其他具有静态内容的ngTemplateOutlet元素时才可扩展。

请在这里查看：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属性的静态块来显示：无。这样，它就不会显示出来，并且您仍然可以正常工作，直到在清晰度方面提供了修复。我还建议您在其github上创建问题。这是一个stackblitz示例：

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

Answer 2

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

希望这会有所帮助！

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

2 个答案: