使用 *ngIf 处理正在打印以在 Angular 2 应用程序中查看的活动标志和非活动标志

Question

在我的 Angular 2 应用程序的模板中，我正在处理向屏幕打印标志。因为这是 Angular 2（不是 Angular 4）——而且我们还没有准备好移动到 Angular 4，所以我无法定义 "else" 块，所以我必须找到一种不同的方法来完成使用 "else" 块的简单方法。

现在我正在将标志打印到此 table 数据的列中，如果有标志 "completed === false" -- 意味着它们是活动的。

我运行遇到的挑战是如何处理没有标志或有但属性 "completed" 的情况设置为 "true"——所以在这种情况下它们不再是活动标志。

基本上我想使用 *ngFor 和 *ngIf 在有标志的情况下将标志打印到列，并且 "completed" 属性设置为 "false" 这些标志。如果没有标志，或者找到的所有标志都将 "completed" 属性设置为 "true"，我只想将 "Clear" 打印到屏幕上。这是我目前所拥有的：

   <ng-container *ngFor="let service of record.services"> 

        <ng-template *ngIf="service?.service === 'consulting services' && service?.flags">
            <ng-template *ngFor="let flag of service.flags">
                <span *ngIf="flag?.completed === false" class="standard-flag" 
                    [class.hold-flag]="flag?.flagType === 'hold'">Flag
                </span>
            </ng-template>
            <ng-template *ngFor="let flag of service.flags">
                <span *ngIf="flag?.completed === true" class="green-flag">Clear
                </span>
            </ng-template>
        </ng-template>

    </ng-container>

目前正在生成的是两种标志都被打印到屏幕上（其中 "completed" 是 "false" 或 "true"）。我想做的是说类似的话——如果没有标志，或者有标志，但所有标志都 "completed === true"，那么只在屏幕上打印 "Clear"。

这样一来，列中总会有一些内容 - "Flag" 或 "Clear" - 但绝不能同时出现在同一列中。希望这很清楚。

我可以在视图中使用哪种语法结构来实现这一点？

Answer 1

您可能想看看 ngSwitch。

这就像一个刚刚在模板中处理的 switch 语句。您可能必须创建另一个变量来控制 switch 语句。希望您可以处理该逻辑，因为我只是传递您可能正在寻找的语法结构。

使用 *ngIf 处理正在打印以在 Angular 2 应用程序中查看的活动标志和非活动标志

Using *ngIf to Handle Active vs Inactive Flags Being Printed to View in Angular 2 App

javascript

arrays

typescript

angular-ng-if

angular