如何使用双向数据绑定将一个文本替换为另一个文本？答案

【问题标题】：How can I replace one text with another with two-way data binding?如何使用双向数据绑定将一个文本替换为另一个文本？
【发布时间】：2023-03-10 10:34:01
【问题描述】：

我在 Mat-Table 中介绍了两个案例。如果没有数据，用户会看到 No Data Found，如果他应该在过滤器中搜索 Not Data Found 应该被隐藏并替换为输入的文本。你知道这是怎么回事吗？

我的代码：

// Filter input
<input matInput #filter (keyup)="applyFilter($event.target.value)" placeholder="Durchsuchen" />

 <!-- Triggered by the filter -->
          <div class="no-search-results" [hidden]="isTableHasData">
            <p>Du hast nach <span class="filter-value">"{{ filter.value }}"</span> gesucht. Wir haben leider keine Ergebnisse gefunden.</p>
          </div>

          <!--  Triggered because there is no data in the backend -->
          <div class="no-data" *ngIf="dataSource !== null && dataSource.data !== null && dataSource.data.length === 0">
            <p>No Data Found</p>
          </div>

// TS
public applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
    if (this.dataSource.filteredData.length > 0) {
      this.isTableHasData = true;
    } else {
      this.isTableHasData = false;
    }
  }
``

【问题讨论】：

你当前的代码有什么输出？
在当前代码中，过滤时会显示第一个 div 中的文本。这也是正确的。不幸的是，我还看到了第二个 div 中的文本。我该如何隐藏它？

标签： javascript angular typescript mat-table

【解决方案1】：

如果有数据，您可以在这里使用If Else 仅显示表格，如果没有，则显示您的无数据消息。

  <div *ngIf="dataSource !== null && dataSource.data !== null && dataSource.data.length === 0; else noData" class="no-search-results">
            <p>Du hast nach <span class="filter-value">"{{ filter.value }}"</span> gesucht. Wir haben leider keine Ergebnisse gefunden.</p>
          </div>
  <ng-template #noData>
          <div class="no-data">
            <p>No Data Found</p>
          </div>

  </ng-template>

检查此堆栈闪电战https://stackblitz.com/edit/angular-mat-table-filter-predicate-zs7bgd?file=app%2Ftable-filtering-example.html

【讨论】：

您好，感谢您的示例。不幸的是，它对我不起作用。我想要如果没有数据并且用户使用过滤器没有显示没有数据并且您只看到无搜索结果。这是我的代码 sn-p：stackblitz.com/edit/…
不太清楚你的意思。你能用更好的方式解释吗？ ;)
我正在尝试做什么... 如果表中没有数据，您会看到未找到。如果用户在过滤器中输入了某些内容，则应仅显示他输入的内容，而应隐藏未找到的内容。这不起作用...见 stackblitz
@anyanx 检查我更新的答案。我还更新了 stackblitz。希望这就是你要找的东西
在您的示例中未显示未找到数据

【解决方案2】：

如果没有数据并且用于过滤的输入字段为空，则显示“无数据”消息。如果表中有数据但搜索结果为空，则显示“搜索词”消息。

您可以使用*ngIf 执行此操作。

【讨论】：