Question

我正在使用管道从存储中获取数据（Redux状态管理），并使用此数据进行一些处理，并添加一些标记并返回新的标记。在html中，我收到此值并进行渲染。一旦我开始使用商店并使用可观察模式从商店中获取数据，就无法在html模板上接收任何数据。当我在管道上打印iside值时（恰好在返回之前），它显示数据，但不会反映在html元素上。

这是tranform函数中的代码

@Pipe({
  name: 'highlight',
})
export class HighlightSearchPipe implements PipeTransform {


constructor(private store: Store<any>, private sanitizer: DomSanitizer) 
{}

transform(value: any, args?: any): any {
this.store
  .select(currentSearchQuerySelector)
  .pipe(
    takeUntil(this.destroyed$),
  )
  .subscribe(processedSearchText => {
    processedSearchText.forEach(searchText => {
      const re = new RegExp(searchText, 'gi');
      const match = value.match(re);
      // If there's no match, just return the original value.
      if (!match) {
        return value;
      }

      value = value.replace(re, '<mark class="saqr-first-mark">' + match[0] + '</mark>');
    });
    console.log(value);  //print the right values
    return value;
  });
 }
}

这是html代码

 <span class="m-widget3__username" [innerHTML]="user.name | highlight | async">

Answer 1

您正在尝试返回无效的订阅回调。您在这里可能要做的是返回Observable，以便您的async可以订阅它。

return this.store
  .select(currentSearchQuerySelector)
  .pipe(
    takeUntil(this.destroyed$),
    map(processedSearchText => {
    processedSearchText.forEach(searchText => {
      const re = new RegExp(searchText, 'gi');
      const match = value.match(re);
      // If there's no match, just return the original value.
      if (!match) {
        return value;
      }

      value = value.replace(re, '<mark class="saqr-first-mark">' + match[0] + '</mark>');
    });
    console.log(value);  //print the right values
    return value;
  })
 });

显然，当我编辑代码段时，方括号可能是错误的，但是您应该了解一下并进行调整，使其与您的IDE语法上有效。

管道在其中使用observabe时不返回值

1 个答案: