observable 相关问题

可观察的通常是编程构造，可以被代码的其他部分“监视”，称为“观察者”。不同的框架和编程语言对于可观察对象具有不同的实现，因此该标记通常应与其他标记一起使用。

每次用户更改输入值时我都尝试访问数据。搜索可能会返回错误。在这种情况下，我想禁用 AI (semanticDisabled) 进行将来的搜索，然后

angular error-handling observable rxjs5 rxjs-observables

回答 1 投票 0

我正在尝试使用带有角度的稍加修改的版本： Observables : 在新的订阅调用中取消先前的 http 请求但它不起作用。我正在尝试使用稍微改变的版本与角度： Observables：在新的订阅调用中取消先前的http请求但它不起作用。 <input id="searchbox" value="{{ searchTerm$ | async }}" #searchBox type="text" (input)="search(searchBox.value)"> .ts private searchTerms = new Subject<string>(); ngOnInit() { this.searchTerms.pipe( tap((term: string) => this.store.dispatch(new SearchForTermAction(term))), ).subscribe(); } search(term: string): void { if (term.length >= 2) { this.searchTerms.next(term); } } 并且在该州 @Action(SearchForTermAction) async searchForTerm(ctx: StateContext<SearchStateModel>, action: SearchForTermAction) { const currentState = ctx.getState(); of(action.searchTerm).pipe( debounceTime(500), // ignore new term if same as previous term distinctUntilChanged(), switchMap(term => this.service.searchTerm(term)), ).subscribe(res => { console.log("result gotten"); ctx.setState({ searchResults: res, loading: false, }); }); } 但是，当我输入搜索词时，“获得结果”将被打印多次。我的错误在哪里？通过使用 of，您将创建一个新的可观察量，每次调用操作时都会发出一个值，因此 debounceTime 和 distinctUntilChanged 运算符没有之前的值可供比较。因此，您应该将这些运算符附加到主题的连续价值流中。要在新值到达时取消请求，通常需要 switchMap 运算符。但是，由于您使用的是 ngxs，因此不可能像这样取消，因此您必须告诉它在调度新的 SearchForTermAction 时取消。在组件中： ngOnInit() { this.searchTerms .pipe( debounceTime(500), // ignore new term if same as previous term distinctUntilChanged(), switchMap((term: string) => this.store.dispatch(new SearchForTermAction(term))) ) .subscribe(); } 所在州： actions$ = inject(Actions); @Action(SearchForTermAction) searchForTerm(ctx: StateContext<SearchStateModel>, action: SearchForTermAction) { return of(action.searchTerm).pipe( switchMap(term => this.service.searchTerm(term)), tap(res => { console.log('result gotten'); ctx.setState({ searchResults: res, loading: false }); }), takeUntil(this.actions$.pipe(ofAction(SearchForTermAction))) ); }

angular rxjs observable

回答 1 投票 0

一旦 observable 完成，如何使用异步管道删除元素

假设我有一个 div 元素，其中有一个正在发出值的可观察值： {{ 值 }} 我想删除 fr 元素...

angular rxjs observable

回答 2 投票 0

Javascript d3js 中带圆角的路径

我想为一个角创建一个圆角边缘，用户可以在 D3js 中指定角的半径。我发现一篇文章有潜在的解决方案，但示例位于 Observable 笔记本中。我

javascript d3.js observable

回答 2 投票 0

为什么我的可观察对象没有捕获错误并停止工作

我有表格。用户输入输入，然后向后端发送http请求以获取数据。在我的 HTML 模板中数据$ |异步在组件代码中我首先有：数据$：可观察<

angular typescript rxjs observable angular-observable

回答 2 投票 0

Angular 订阅 HTTPClient Observable，报错 req.url.toLowerCase is not a function

我正在使用一项服务从网址检索数据，我正在另一个组件中使用该服务来在前端显示数据... 我的服务： getHttpData(baseurl, 前缀?, 后缀?, startTime?, en...

angular observable httpclient

回答 2 投票 0

设置。使用状态订阅可观察对象

我有这个钩子从 'observable-hooks' 导入 { useObservable, useObservableState } const tableUpdated = (表) => { const 数据库 = useDatabase(); 常量数据 = useObservableState(...

javascript reactjs rxjs observable

回答 1 投票 0

如何为 RxJS 计时器添加停止和启动功能？

我添加了开始、停止、暂停按钮。 Start 将启动一个倒计时器，该计时器将从一个值开始，不断递减，直到值达到 0。我们可以通过单击暂停按钮暂停计时器....

rxjs observable

回答 4 投票 0

观察/观察 Vue 中 DOM 子级的数量

给定一个具有槽使用的典型 Vue 组件：导出默认值{ 名称：“VueComponent&</desc> <question vote="4"> <p>给出具有 <pre><code>slot</code></pre> 用法的典型 Vue 组件：</p> <pre><code><template> <div> <slot></slot> </div> </template> <script> export default { name: "VueComponent" } </script> </code></pre> <p>有没有可能的方法来实现一个观察者/观察者来跟踪 <pre><code>slot</code></pre> 中 DOM 子级的数量？我需要知道何时在组件内添加/删除子项。</p> </question> <answer tick="true" vote="5"> <p>所以我发现对我的问题有用的是<a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow noreferrer"><pre><code>MutationObserver</code></pre></a>。我们需要在组件安装后将观察者附加到组件上，添加回调处理程序并在组件销毁之前断开观察者的连接（在 Vue3 中卸载）。</p> <p>这是一个用 Vue 2.6 编写的工作示例</p> <pre><code><template> <div ref="container"> <slot></slot> </div> </template> <script> export default { name: "VueComponent", data() { return { observer: null } }, mounted() { this.initObserver() }, beforeDestroy() { if (this.observer) this.observer.disconnect() }, methods() { handleChildrenChanged() { }, initObserver() { config = { subtree: false, childList: true, // it's better if you can detect children change by id // this can reduce number of updates // attributes: true, // attributeList: [ 'id' ] } const self = this const callback = () => { self.$nextTick(() => { self.handleChildrenChanged() }) } const observer = new MutationObserver(callback) observer.observe(this.$refs.container, config) this.observer = observer } } } </script> </code></pre> <p>您可以在 Vue 中找到 <pre><code>MutationObserver</code></pre> 的另一种用法：<a href="https://dev.to/sammm/using-mutationobserver-and-resizeobserver-to-measure-a-changing-dom-element-in-vue-3jpd" rel="nofollow noreferrer">https://dev.to/sammm/using-mutationobserver-and-resizeobserver-to-measure-a-changing-dom-element-in-vue-3jpd </a></p> </answer> </body></html>

vue.js observable mutation-observers

回答 0 投票 0

尽管在 Angular 中可以订阅和使用属性的最新值，但异步管道不会更新视图

考虑下面不起作用的快照：父.ts allowed$ : 可观察; 父级.html 儿童.ts @Input() 允许：布尔值

angular rxjs observable subscribe async-pipe

回答 2 投票 0

MobX React - 更新对象数组的单个索引会重新渲染所有子对象

我有一个 mobx 对象存储，这些对象显示在列表视图中，并在存储值上有一个地图，如下所示： {ObjectStore.objects.map((obj, 索引) => 我有一个 mobx 对象存储，这些对象显示在列表视图中，并在存储值上有一个地图，如下所示： {ObjectStore.objects.map((obj, index) => <ObjectItem key={obj.id} obj={obj} objIndex={index} ...unrelated UI Pros /> )} 在 ObjectItem 中有一个 onClick 处理程序，它向该特定对象添加一些新内容： const handleClick = () => { ObjectStore.updateObjectbyIdx(objIndex, newData) } 在商店 updateObjectbyIdx (index, data) { this.objects[index] = { ...this.objects[index], ...data} } 两个 React 组件都包装在观察者中。当句柄单击运行时，它会导致父容器重新呈现，然后所有 ObjectItem 组件重新呈现，即使附加数据仅通过索引添加到单个项目。最初我完全避免使用索引并使用地图更新它，如下所示： updateObjectbyId (id, data) { this.objects = this.objects.map(obj => obj.id === id ? { ...obj, ...data} : obj }) } 但我假设由于这是创建一个新的数组引用，因此父容器观察ObjectStore.objects重新渲染。切换到索引让我期望父级不会重新渲染，因为主数组引用仍然存在，并且由于我在最新点解构了值，因此只有单个 ObjectItem 会重新渲染。我最终确实让它发挥作用： updateObjectbyIdx (index, data) { Object.keys(data).forEach(dataKey => { this.objects[index][dataKey] = data.dataKey } } 但是，当我只想更新数组中单个对象中的数据时，这似乎是一个奇怪的解决方法。这样做： updateObjectbyIdx (index, data) { this.objects[index] = { ...this.objects[index], ...data} } 您还更新了对该对象的引用，并且由于父组件使用该对象，它将重新渲染。您可以这样做 Object.assign：，而不是最后一个解决方案（实际上，这是正确且很好的） updateObjectbyIdx (index, data) { Object.assign(this.objects[index], data) } 这将保留引用并仅更新属性。只需记住深层嵌套的属性、对象、数组即可。要处理它们，您最好使用某种 mergeDeep 函数，Object.assign 不会进行合并，它基本上会覆盖您在自定义循环中所做的所有内容。

reactjs observable mobx mobx-react

回答 1 投票 0

与 api 结果相关的可观察问题

最近一位面试官问了我一个关于observable的问题。问题是： '假设我有两个 API 的 API A、B，并且我想在 API B 参数输入中使用 API A 结果。我怎样才能实现这些？ ...

javascript angular rxjs observable

回答 1 投票 0

我的 observableFIeld 显示空值是否有原因？

我有 MainActivity，我将 editTextValue 声明为 ObservableField 我想在单击按钮时使用 editTextValue.get() 获取它并将其传递给另一个函数。但我总是感到空虚。班级

android kotlin data-binding observable

回答 1 投票 0

在视图之外初始化的组合函数

我有一个 Updater 类，它使用合并来检查一个状态然后更新另一个状态。如果我在视图中初始化更新程序，它可以正常工作，但每次重绘视图时它都会再次初始化。我...

swift swiftui observable combine

回答 1 投票 0

如何在 SwiftUI 中绑定 TextField，同时仍使用它来存储收藏夹？

我有一个文本字段，用户可以在其中手动输入位置字符串。这与我观察到的对象 AppState 绑定，我已重新标记该对象（应用程序），其中有一个名为目标的 @Published var。这...

ios swift swiftui observable textfield

回答 1 投票 0

什么触发了combineLatest？

我有一些观察结果。我需要知道哪一个触发了订阅。 Observable.combineLatest( this.tournamentsService.getUpcoming(), this.favoriteService.getFavoriteTournam...

rxjs observable combinelatest

回答 6 投票 0

Angular：props 属性上的BehaviorSubject (@Input)

我问下面的代码是否是最好的方法。语境测量值由父组件给出每次测量更改时，子组件都必须应用一些检查。成分出口类

angular observable behaviorsubject

回答 1 投票 0

如何修改包含数组的BehaviorSubject而不分配整个数组？

我知道，如果我想向数组BehaviorSubject 添加一个项目，我需要使用 next() 分配整个数组的副本以及新项目。但是，我想将项目推入这个数组......

javascript angular typescript observable behaviorsubject

回答 1 投票 0

TS2339：类型“WritableSignal<Product[]>”上不存在属性“slice”

我正在尝试通过切片数据数组向我的 Angular 10.1.0 项目添加分页。但是，我收到 TS2339：“WritableSignal”类型上不存在属性“切片”错误。这里是...

angular typescript observable

回答 1 投票 0

角度：从模板中的可观察数组中获取随机元素

我正在尝试从 Observable 数组中获取随机元素以在模板中使用。目前我正在使用 @Select(SomeState.tiles)tiles$: Observable; 和 getRandomTile$(): 可观察...

angular rxjs observable

回答 1 投票 0

observable 相关问题

最新问题