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

【问题标题】：On a ngFor iteration, if a value is equal to a specific value do not list out the value using Angular4在 ngFor 迭代中，如果一个值等于特定值，则不要使用 Angular4 列出该值
【发布时间】：2025-12-29 07:50:09
【问题描述】：

在 *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;
    });
}

我想检查类别是否 = '选择一个类别'，如果它返回 true，它将不会在按钮列表中显示该项目。我觉得这应该是一件容易完成的事情，但没有找到解决方案。任何帮助将不胜感激，谢谢。

【问题讨论】：

标签： angular angular-forms

【解决方案1】：

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

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

希望对你有帮助:)

【讨论】：

感谢您的回复，我对如何实施此解决方案感到有些困惑。我需要显示除 =“选择类别”的类别之外的所有类别。我尝试更改 *ngIf="Category !== 'Select a Category'" 但没有骰子。
它将我列出的所有项目显示为“对象对象”作为按钮的文本
所以类别是一个对象，我想你必须测试类别的名称（如果它有一个名字..我的意思是它的标签..你已经知道你的对象是什么组成的) 不等于“选择一个类别”：*ngIf="Category.name !== 'Select a Category'"，我猜它会起作用
奇怪的是数组是字符串列表，而不是对象..
太奇怪了，你能编辑一下帖子，这样我们就可以看到.ts文件来检测问题到底出在哪里

【解决方案2】：

在概念上必须有更好的方法来处理这个问题，但是如果您只想不显示该特定情况的标签，那么您可以将标签包装在 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>

【讨论】：

我希望不要走这条路，您还有其他解决方案吗？我最终将“选择类别”作为被迭代数组的值，因为我无法获得显示“选择类别”的初始选择值，因为它与 ngModel 相关联。基本上，这是一个糟糕的 hack，因为我厌倦了尝试获取初始值来显示 Select a Category。
您可以从数组对象 categories 中分离“选择类别”元素（因为它必须是唯一没有值的元素，然后将其静态添加为第一个 button 元素在您的在模板中列出，然后使用ngFor 在此静态按钮标记之后显示剩余的选项列表。
所以，我隐藏了一个 div，它在移动视图中将我的类别列为按钮，并显示将类别转换为选择下拉列表的列表。希望这能更多地解释我的情况。我将“选择类别”项添加到数组中，以便最初可以将默认选项显示为“选择类别”。这很好用，但是当我切换到桌面视图时，它会将第一个按钮显示为选择我不想要的类别。
您使用什么逻辑来确定移动和桌面视图？
我只是使用带有 display: none 和 block 的 CSS 媒体查询

【解决方案3】：

我觉得你可以用[hidden]=" category === 'Select a Category'"

【讨论】：

我已经尝试过这个解决方案，但没有奏效。不过谢谢