Angular2 *ngIf 在 *ngFor 内答案

【问题标题】：Angular2 *ngIf inside *ngForAngular2 *ngIf 在 *ngFor 内
【发布时间】：2017-12-10 10:18:45
【问题描述】：

在 Angular 2 中，我想循环遍历一个数组并根据某些条件在下拉列表中显示选项。根据我的搜索，我可以在循环上方的 ng-container 指令中放置一个条件。我怎么能在循环内做到这一点。（请注意，如果我将内容放在循环中，则会显示一个空格而不是选项）。谢谢！

<md-autocomplete #package="mdAutocomplete" [displayWith]="displayPackage">
    <md-option (onSelectionChange)="packageSelection($event, package) *ngFor="let package of (reactivePackages | async)"" [value]="package">
          {{ package.packageName }}
          {{package.serviceId}}
          {{service.serviceId}}
    </md-option>
</md-autocomplete>

【问题讨论】：

您可以过滤 ngFor 运行的数组 (*ngFor="let package of (reactivePackages | async).filter(pac => pac.someValue == 1)")，也可以将 ngIf 放在 ngFor i> 并且还使用 hidden 属性。

标签： angular2-directives ngfor angular-ng-if

【解决方案1】：

您可以使用 ng-container 循环遍历数组，并且可以在 md-options 上使用 ngif，如下所示：

  <md-autocomplete #package="mdAutocomplete" [displayWith]="displayPackage">
    <ng-container *ngFor="let package of (reactivePackages | async)">
        <md-option (onSelectionChange)="packageSelection($event, package)" [value]="package" *ngIf="your-condition" >
            {{ package.packageName }} {{package.serviceId}} {{service.serviceId}}
        </md-option>
    </ng-container>
</md-autocomplete>

希望这会有所帮助。

【讨论】：