在 ngFor 迭代中，如果值等于特定值，则不要使用 Angular4 列出该值

Question

在 *ngFor 迭代中，如果值等于特定值，则不要使用 Angular4 列出列表中的值。

我的模板：

<div class="desktop-list btn-group-vertical show-cat">
    <button class="list-group-item list-group-item-action cat-btn" *ngFor='let category of categories' (click)="getCatName($event)">{{category}}<i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
<div class="mobile-select show-cat">
    <select class="mobile-select show-cat" [ngModel]="selectedCat" (ngModelChange)="change($event)" name="category" id="cat-column" placeholder="Select a Category">
      <option [ngValue]="category" class="cat-btn" *ngFor='let category of categories'>{{category}}</option>
    </select>
</div>

组件 getCategories 函数：

getCatgegories(masterProduct: number) {
  this.service.getCatgegories(masterProduct)
    .subscribe(response => {
      this.categories = response.catList;
      this.categories.splice(0,0, 'Select a Category');
      this.masterName = response.name;
    });
}

我想检查类别是否为 'Select a Category'，如果 returns 为真，则不会在按钮列表中显示该项目。我觉得这应该是一件容易完成的事情，但没有找到解决方案的运气。任何帮助将不胜感激，谢谢。

Answer 1

必须有更好的方法来从概念上处理这个问题，但是如果您只想不显示该特定情况的标签，那么您可以将标签包装在 span 中并为此隐藏它特殊情况。

<div class="desktop-list btn-group-vertical show-cat">
    <button class="list-group-item list-group-item-action cat-btn" *ngFor='let category of categories' (click)="getCatName($event)">
      <span *ngIf="category !== 'Select a Category'">{{category}}<i class="glyphicon glyphicon-chevron-right"></i></span>
    </button>
</div>

Answer 2

我想你可以使用 [hidden]=" category === 'Select a Category'"

Answer 3

作为一个简单的解决方案：

<div class="desktop-list btn-group-vertical show-cat">
    <ng-template ngFor let-category [ngForOf]="categories"> 
         <button class="list-group-item list-group-item-action cat-btn" *ngIf="category !=='Select a Category'" (click)="getCatName($event)">{{category}}<i class="glyphicon glyphicon-chevron-right"></i>
          </button>
    </ng-template>
</div>

希望对你有帮助:)

在 ngFor 迭代中，如果值等于特定值，则不要使用 Angular4 列出该值

On a ngFor iteration, if a value is equal to a specific value do not list out the value using Angular4

angular

angular-forms