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

我在TypeScript中以div显示以下标签和值，但如果有空值，则下一行或元素将进入空div，如图所示。我认为我可以通过检查值为相关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.Created}}
更新：
{{record.Updated}
固定的：
{{record.Resolved}}

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

---

使用不可分割的空格

作为默认值，而不是空字符串：

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

创建：
{{record.Created | |'''}}
更新：
{{record.Updated}
固定的：
{{record.Resolved}

---

请参见演示。

因为您使用的是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>

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

创建：
{{record.Created}}
更新：
{{record.Updated}
固定的：
{{record.Resolved}}

如果不想重复每个*ngIf两次，也可以使用标记“ng container”，如下所示：

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

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

创建：
{{record.Created}}
更新：
{{record.Updated}
固定的：
{{record.Resolved}}

使用*ngIf和[class.something]可以避免整个“div padder”

e、 g

创建：
{{record.Created}}

---

也许管道解决方案更容易阅读，不过：D

你是否尝试过添加空格而不是空字符串？@RyanWilson是的，完全正确，但没有解决。你是否尝试过

{{record.Updated | null}

？@shashikantevani是的，但没有解决你应该尝试{record？.Updated | | | N/a}所以那个空值并没有给出错误。使用？后记录。