Question

在我的Angular2应用程序中，我在视图中打印了一些数据。我们数据的一部分是一组标志。现在，我成功地使用*ngFor和*ngIf的组合在这些值存在时将值打印到视图中。这一切都按预期使用此代码：

    <ng-container *ngFor="let status of record.status"> 
        <td *ngFor="let flag of status.flags"> 
            <span *ngIf="flag.flag" class="standard-flag">
                 {{flag?.flag}} 
            </span>
            <span *ngIf="!flag.flag" class="zero-flags">
                No Flags
            </span>
        </td>  
    </ng-container>

现在，在没有数据（即空数组）的情况下，我想简单地打印＆＃34; No Flags＆＃34;到屏幕 - 见上文。据我所知，没有＆＃34;其他＆＃34; Angular 4之前的功能（如果我错了，请纠正我）。所以我需要做的是使用*ngIf评估何时是这种情况并打印“没有标志”。相应地到屏幕。

这证明特别困难，我不知道为什么。我已经盯着屏幕看了太久，尝试了很多组合，但都无济于事。

为了处理＆＃34; flags＆＃34;中没有价值的情况，我已经尝试了我现在所拥有的：

<span *ngIf="!flag.flag" class="zero-flags">

以及：

<span *ngIf="flag.flag ===''" class="zero-flags">

我没有收到错误，我只是将正确的值打印到视图中，或者，如果没有值，则根本不显示任何内容（当出现的内容为＆＃34; No Flags＆＃34 ）。我在这里错过了什么？我怎么能处理这个以获得理想的结果？基本上，我想要＆＃34; No Flags＆＃34;在＆＃34;标志＆＃34;的情况下打印到视图是＆＃34; status＆＃34;中所有3个对象的空数组。阵列。

供参考，数据如下：

"status": [
    {
        "reference": "gold",
        "flags": []
    },
    {
        "reference": "silver",
        "flags": []
    },
    {
        "reference": "bronze",
        "flags": [
            {
                "flag": "Not Available",
                "flagType": "normal"
            }
    }
],

Answer 1

如果status.flags中没有标记，您将永远不会打到打印“无标记”的语句。你不能迭代一个空数组。使用*ngIf检查status.flags中是否有任何标记。如果没有打印“没有标志”。

<ng-container *ngFor="let status of record.status">
    <div *ngIf="status.flags.length > 0">
        <td *ngFor="let flag of status.flags"> 
            <span *ngIf="flag.flag" class="standard-flag">
                {{flag?.flag}} 
            </span>
        </td>
    </div>
    <div *ngIf="status.flags.length < 1">
        <td>
            <span *ngIf="!flag.flag" class="zero-flags">
                No Flags
            </span>
        </td>
    </div>
</ng-container>

Answer 2

*ngFor只有在数组中有数据时才会运行。否则，它内部的所有内容都会被忽略，所以你的＆＃34; No Flags＆＃34;标记永远不会被阅读。

尝试将其移到*ngfor之外并按如下方式编写：

<td *ngIf="!status.flags.length">
    <span class="zero-flags">
        No Flags
    </span>
</td>

Answer 3

试试这个

<span *ngIf="flag.flag !== '';else noFlag" class="standard-flag">
    {{flag?.flag}} 
</span>

<ng-template #noFlag>No Flags</ng-template>

Answer 4

打印＆＃39; flag.flag＆＃39;看看它的价值。如果你看下面的样本。任何值，如＆＃39;＆＃39;，null，undefined也会使你的部分消失

 <span *ngIf="''" class="zero-flags">
                    No Flags -- wont work
                </span> 
                <span *ngIf="null" class="zero-flags">
                    No Flags  -- wont work
                </span> 
                <span *ngIf="undefined" class="zero-flags">
                    No Flags  -- wont work
                </span>
                <span *ngIf="false" class="zero-flags">
                    No Flags 
                </span> 
                <span *ngIf="true" class="zero-flags">
                    No Flags
                </span>

在Angular 2应用程序中使用* ngIf在负面情况下未获得预期结果

4 个答案: