Невозможно исправить положение для нулевых значений в div - PullRequest
Новая
       11

Невозможно исправить положение для нулевых значений в div

1 голос
/ 08 мая 2019

У меня есть следующая метка и значения, отображаемые в divs в TypeScript, но если есть нулевые значения, следующая строка или элемент приходят в нулевые div, как показано на рисунке. Я думаю, что могу установить style = "visibility: hidden;" для связанного div путем проверки значения, но я думаю, что есть лучший способ решить проблему. 

<div class="ui-g-12">
    <div class="ui-g-3">Created : </div>
    <div class="ui-g-9">{{ record.Created }}</div>
    <div class="ui-g-3">Updated : </div>
    <div class="ui-g-9">{{ record.Updated || '' }}</div>
    <div class="ui-g-3">Fixed : </div>
    <div class="ui-g-9">{{ record.Resolved }}</div>
</div>

Когда я набираю просто точку (.) В качестве записи. Обновление || '' нет проблем. Но я не хочу отображать точку и устанавливать значение как пустую или пустую строку. Любое решение, чтобы решить проблему?

enter image description here

Ответы [ 3 ]

2 голосов
/ 08 мая 2019

Используйте неразрывный пробел &nbsp; в качестве значения по умолчанию вместо пустой строки: 

<div class="ui-g-12">
    <div class="ui-g-3">Created : </div>
    <div class="ui-g-9">{{ record.Created || '&nbsp;' }}</div>
    <div class="ui-g-3">Updated : </div>
    <div class="ui-g-9">{{ record.Updated || '&nbsp;' }}</div>
    <div class="ui-g-3">Fixed : </div>
    <div class="ui-g-9">{{ record.Resolved || '&nbsp;' }}</div>
</div>

См. этот стек для демонстрации.

0 голосов
/ 08 мая 2019

Вы можете избежать всего этого 'div padder', используя * ngIf и [class. что-то ]

, например 

<div class="ui-g-12">
    <div [class.ui-g-3]="record" [class.ui-g-12]="!record">Created : </div>
    <div *ngIf="record" class="ui-g-9">{{ record.Created }}</div>
</div>

Возможно, решение о трубе немного проще для чтения: D

0 голосов
/ 08 мая 2019

Поскольку вы используете angular, я бы использовал директиву "ngIf".И код будет выглядеть так: 

<div class="ui-g-12">
    <div *ngIf="record.Created" class="ui-g-3">Created : </div>
    <div *ngIf="record.Created" class="ui-g-9">{{ record.Created }}</div>
    <div *ngIf="record.Updated" class="ui-g-3">Updated : </div>
    <div *ngIf="record.Updated" class="ui-g-9">{{ record.Updated || '' }}</div>
    <div *ngIf="record.Resolved" class="ui-g-3">Fixed : </div>
    <div *ngIf="record.Resolved" class="ui-g-9">{{ record.Resolved }}</div>
</div>

Если вы не хотите повторять каждый * ngIf дважды, вы также можете использовать тег «ng-container», например: 

<div class="ui-g-12">
    <ng-container *ngIf="record.Created">
        <div class="ui-g-3">Created : </div>
        <div class="ui-g-9">{{ record.Created }}</div>
    </ng-container>
    <ng-container *ngIf="record.Updated">
        <div class="ui-g-3">Updated : </div>
        <div class="ui-g-9">{{ record.Updated || '' }}</div>
    </ng-container>
    <ng-container *ngIf="record.Resolved">
         <div class="ui-g-3">Fixed : </div>
         <div class="ui-g-9">{{ record.Resolved }}</div>
    </ng-container>
</div>
...