如果在 Angular 中找不到结果，如何隐藏组件答案

【问题标题】：How to hide a component if there is no result found in Angular如果在 Angular 中找不到结果，如何隐藏组件
【发布时间】：2021-11-06 12:21:15
【问题描述】：

在我的主页中，我有一个搜索栏并导入了三个组件。我的搜索栏可以通过它们进行搜索，但只是想知道如果在该组件中找不到结果并且只显示有结果的组件，我该如何隐藏该组件。

我现在遇到的问题是，如果搜索结果只在应用程序组组件中找到，那么附件和培训组件显示我是空白的（请检查下面上传的图片）。我只想在用户过滤/搜索时隐藏没有结果的组件，并在用户取消搜索时将其显示回组件。

如果我能得到这方面的帮助或建议，我将不胜感激。

    <!-- attachments -->
    <div>
      <app-attachment [attachments]="entity.attachments"></app-attachment>
    </div>
    <!-- appgroups -->
    <div *ngFor="let entityGroup of entity.entityGroups">
      <app-application-group [entityGroup]="entityGroup" [entity]="entity"></app-application-group>
    </div>

    <!-- Training and Support -->
    <div>
      <app-training [entity]="entity"></app-training>
    </div>
  </div>

  ngOnInit(): void {
    this.searchText$ = this.searchService.searchText
      .asObservable()
      .pipe(debounceTime(750), distinctUntilChanged())
      .subscribe((value) => {
        this.filterValue = value;
        this.loadApplication(this.entityType, this.entityId);
      });

    this.collapse = false;
    this.expanded = true;
    this.route.url.subscribe((_value) => {
      this.entityType = BaseEntity.stringToType(_value[0].path);
      this.entityId = Number(_value[1].path);
      this.loadApplication(this.entityType, this.entityId);
      this.populateMeetups(this.entityId);
    });
  }

  loadApplication(entityType: EntityType, entityId: number): void {
    this.color = BaseEntity.color(this.entityType);
    if (this.entityType && this.entityId) {
      // this.filterValue = null;
      this.childrenActive = null;
      this.pageSize = 999;
      this.childrenActive = true; // We want to bring only active children for things that have tables.
    }
    this.entityService
      .getApplicationDetails(
        entityId,
        entityType,
        this.pageSize,
        this.childrenActive,
        this.filterValue,
      )
      .subscribe((entity) => {
        this.entity = entity;
        this.ancestor = this.entity.channels.get(0);
        this.entityGroup = this.entity.entityGroups.filter(
          (r) => r.entityType === EntityType.Application,
        );
        this.entity.attachments = this.entity.attachments.filter((app) => {
          return app.name.toLowerCase().includes(this.filterValue.toLowerCase());
        });
      });
  }

click here to view my screenshot

【问题讨论】：

我认为你可以在里面放一些 *ngIf。例如<div *ngIf="entity?.attachments?.length > 0"> 位于app-attachment 元素上方。

标签： html angular typescript search filtering

【解决方案1】：

使用 *ngIf 从 DOM 中删除您不想显示的内容。例如：

<ng-container *ngIf="entity.attachments?.length">
  <div>
    <app-attachment [attachments]="entity.attachments"></app-attachment>
  </div>
</ng-container>

或者用css隐藏：

<div [ngClass]="entity.attachments?.length ? 'show' : 'hide'">
  <app-attachment [attachments]="entity.attachments"></app-attachment>
</div>

和css：

.hide {
  visibility: hidden;
}

您可能需要考虑将 *ngIf 放在子组件而不是父组件中。

【讨论】：

【解决方案2】：

尝试通过检查搜索结果的长度而不是创建新变量来使用 ngIf。也可以使用 else 块显示未找到结果，如下所示

在此处显示结果没有找到结果。

【讨论】：