使用 Typescript/Angular 通过 RXJS 隐藏 HTML 元素

Question

有显示食谱的 div（来自对象数组中组件的属性 - 'Recipes'，'Recipes' 包括一个属性'Recipes.diet'，它是一串饮食），我有一个 filterf 组件发送饮食订阅（目前为“素食”、“无麸质”、“素食”）。我想隐藏包含饮食关键字的食谱，例如'Vegetarian' 的 observable 隐藏了所有在其 'diet' 属性中不包含 'Vegetarian' 关键字的食谱。

目前我没有发现差异。
我尝试使用 angular ngClass、ngStyle 来动态过滤类列表以包含“.hide”（将显示设置为无）。

当我将显示静态设置为“无”时，它是成功的，我目前正在尝试一种直接通过 HTML 元素对象操作 Dom 的方法，但这也不起作用。

我检查了关键字是否通过，并且它们与正确的 div 匹配成功。我尝试通过打字稿设置样式属性并添加类类型（这是我在下面尝试的方法）。

我知道这将是一个非常简单的问题，但我已经没有办法检查了，我在网上和 StackOverflow 上进行了搜索，并尝试了我能想到的各种 DOM/Angular 变化。

HTML：

 <div *ngFor="let recipe of recipes" id="{{recipe.title}}-card" (click)="recipeWasChosen(recipe)">
    <app-recipe-title class="recipe-card" [recipe]="recipe">
    </app-recipe-title>
</div>

打字稿：

this.recipeService.recipeRestrictions.subscribe((restrictions: string[]) => {
      this.recipes.forEach((recipe: Recipe) => {
        let hide = false;
        for (const restriction of restrictions) {
          if (!recipe.diet.includes(restriction)) {
            hide = true;
          }
        }
        if (hide) {
          this.hideCardWithHTMLElement(recipe.title);
        } else this.hideCardWithHTMLElement(recipe.title);
      });
    });

  hideCardWithHTMLElement(title: string) {
    let card = document.getElementById(`${title}card`);
    if (card.classList.contains('hidden')) {
      card.className = '';
    } else card.className = 'hidden';
  }

CSS：

.hidden {
  display: none;
}

Answer 1

如果您只想按限制类型过滤列表，您不需要隐藏元素，但您可以过滤掉一般包含限制的元素。您可以这样做

this.recipes$ = this.recipeService.recipeRestrictions
.pipe(
   map((restrictions: string[]) => {
      return this.recipes.filter((recipe) => restrictions.every((restriction) => !recipe.diet.includes(restriction)))
   })
)

在模板中

<div *ngFor="let recipe of recipes$ | async">
...
</div>

Answer 2

您是否尝试过使用 *ngIf 根据隐藏状态动态隐藏食谱？ 由于您不能在同一个容器上添加 *ngFor 和 *ngIf，您可以像这样使用 ng-container：

<div *ngFor="let recipe of recipes" id="{{recipe.title}}-card" (click)="recipeWasChosen(recipe)">
    <ng-container *ngIf="isFiltered(receipe)">
        <app-recipe-title class="recipe-card" [recipe]="recipe"></app-recipe-title>
    </ng-container>
</div>

isFiltered(receipe) 方法是您的过滤器，它根据配方是否被过滤返回 true 或 false。

还要确保避免通过 java 脚本操作 DOM（最好使用 ngIf 指令），因为这会导致问题。