无法固定空值在 div 中的位置

Question

我在 TypeScript 的 divs 中显示了以下标签和值，但如果有空值，下一行或元素将变为空 divs，如图所示。我想我可以通过检查值来为相关的 div 设置 style="visibility:hidden;"，但我认为有更好的方法来解决这个问题。

<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>

当我只键入一个点 (.) 作为 record.Updated || '.'没有问题。但我不想显示点并将值设置为 null 或空字符串。有解决问题的方法吗？

Answer 1

使用牢不可破的 space   作为默认值，而不是空字符串：

<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>

有关演示，请参阅 this stackblitz。

Answer 2

既然您使用的是 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>

Answer 3

你可以通过使用 *ngIf 和 [class.something]

完全避免这整个 'div padder'

例如

<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

无法固定空值在 div 中的位置

Cannot fixed position for null values in div

html

javascript

css

primeng

angular