Вид стека ясности не работает с Angular ngTemplateOutlet - PullRequest
Новая
       15

Вид стека ясности не работает с Angular ngTemplateOutlet

0 голосов
/ 12 июня 2019

Мне нужно отобразить пары ключ-значение с Просмотр стека Clarity в одном и том же компоненте несколько раз. Чтобы избежать дублирования кода, я хотел бы использовать 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>

Я не могу понять, чего мне здесь не хватает.

Спасибо за совет!

Ответы [ 2 ]

0 голосов
/ 24 июня 2019

Представление стека пытается автоматически определить наличие дочерних элементов стекового блока, но если этого не удается сделать, вы можете использовать вход [clrSbExpandable], чтобы явно указать, следует ли включить расширяемое поведение.

Надеюсь, это поможет!

0 голосов
/ 24 июня 2019

Кажется ошибка ясности.

1 Обходной путь, который я нашел, состоит в том, что вы можете добавить статический блок со свойством CSS для отображения: нет. Таким образом, он не будет отображаться, и вы по-прежнему будете работать, пока не будет предоставлено исправление на стороне ясности. Я также советую вам создать проблему на их github. Вот пример стекаблица:

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

...