- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我的应用程序组件正在订阅商店选择。我将 ChangeDetectionStrategy
设置为 OnPush
。我一直在阅读有关其工作原理的信息;需要更新对象引用以触发更改。但是,当您使用异步管道时,Angular 会期待新的可观察更改并为您执行 MarkForCheck。那么,为什么我的代码在触发订阅时不呈现 channel (除非我调用 MarkForCheck
)并且我将 channels$
设置为新的可观察 channel 数组。
@Component({
selector: 'podcast-search',
changeDetection: ChangeDetectionStrategy.OnPush, // turn this off if you want everything handled by NGRX. No watches. NgModel wont work
template: `
<h1>Podcasts Search</h1>
<div>
<input name="searchValue" type="text" [(ngModel)]="searchValue" ><button type="submit" (click)="doSearch()">Search</button>
</div>
<hr>
<div *ngIf="showChannels">
<h2>Found the following channels</h2>
<div *ngFor="let channel of channels$ | async" (click)="loadChannel( channel )">{{channel.trackName}}</div>
</div>
`,
})
export class PodcastSearchComponent implements OnInit {
channels$: Observable<Channel[]>;
searchValue: string;
showChannels = false;
test: Channel;
constructor(
@Inject( Store) private store: Store<fromStore.PodcastsState>,
@Inject( ChangeDetectorRef ) private ref: ChangeDetectorRef,
) {}
ngOnInit() {
this.store.select( fromStore.getAllChannels ).subscribe( channels =>{
if ( channels.length ) {
console.log('channels', !!channels.length, channels);
this.channels$ = of ( channels );
this.showChannels = !!channels.length;
this.ref.markForCheck();
}
} );
}
我尝试了多种解决方案,包括使用 subject
和调用 next
,但这不起作用,除非我调用 MarkForCheck。
谁能告诉我如何避免调用 markForCheck
?
最佳答案
这可能有点难以解释,但我会尽我最大的努力。当您的原始 Observable(商店)发出时,它没有绑定(bind)到模板。由于您使用的是 OnPush 更改检测,因此当此可观察对象发出时,由于缺少绑定(bind),它不会将组件标记为更改。
您正试图通过覆盖组件属性来触发更改标记。即使您在组件属性本身上创建新引用,这也不会将组件标记为更改,因为组件正在更改其自身的属性,而不是将新值推送到组件。
您认为异步管道在发出新值时将组件标记为更改是正确的。您可以在此处的 Angular 源代码中看到:https://github.com/angular/angular/blob/6.0.9/packages/common/src/pipes/async_pipe.ts#L139
但是您会注意到,这仅适用于值(称为 async
),即您与 async
一起使用的属性。 pipe 、火柴 this._obj
, async
的对象pipe 已经记录为正在发射的 Observable。
既然你在做channels$ = <new Observable>
, async === this._obj
实际上是不正确的,因为您正在更改对象引用。这就是您的组件未标记为更改的原因。
您还可以在我整理的 Stackblitz 中看到这一点。第一个组件覆盖传递给 async
的 Observable pipe 而第二个不会覆盖它并通过响应发出的更改来更新数据——这就是你想要做的:
https://stackblitz.com/edit/angular-pgk4pw (我使用 timer
因为它是模拟第三方未绑定(bind) Observable 源的简单方法。使用输出绑定(bind),例如点击更新,更难设置,因为如果它在同一个组件中完成,输出操作将触发更改标记)。
您并没有失去一切——我建议您这样做this.channels$ = this.store.select(...)
反而。 async
管 Handlebars .subscribe
为你。如果您使用 async
你不应该使用的管道.subscribe
无论如何。
this.channels$ = this.store.select(fromStore.getAllChannels).pipe(
filter(channels => channels.length),
// channels.length should always be truthy at this point
tap(channels => console.log('channels', !!channels.length, channels),
);
请注意,您可以使用 ngIf
异步管道也应该避免您对 showChannels
的需求.
关于angular - store.select subscribe 中的更改检测需要 markForCheck。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51464854/
在 的 React 组件中菜单,我需要设置selected反射(reflect)应用程序状态的选项的属性。 在 render() , optionState从状态所有者传递给 SortMenu 组件
我是初级 Ruby-mysql 程序员,我想知道如何使我的(存储过程)查询结果更快.. 这是我的存储过程我正在使用 SQL_CACHE.. 但我不确定.. 缓存使我的过程更快.. : ( DROP
我一直在 Python 中进行套接字编程,以使用 select.select(rfile, wfile, xlist[, timeout]) 处理由已连接的客户端套接字列表发出的请求,并且我还想用 J
我试图通过用空格填充文本来创建下拉列表中的列效果,如下例所示: [Aux1+1] [*] [Aux1+1] [@Tn=PP] [Main] [*] [Main A
我为 MySQL 编写了以下查询: SELECT subquery.t1_column1, subquery.t2_id, MAX(subquery.val) FROM ( S
为什么我们要用 select 标签来编写.attr('selected','selected') 例如: $('#countryList option').filter(function () {
Lokalizacja: Gdańsk Rzeszów Wrocław 不知道发生了什么,但在那种情况下没有选择的选项,我必须从列表中选择一些东西。当我从选
我的表单中有两个选择字段。第一个是单选,另一个是多选。现在我想做的是根据单选中所选的选项,使用给定的数据选择多选中的选项。为此,我在单选更改时触发 ajax 请求: $.ajax({ type
我在 Firefox 5 中发现了一个奇怪的错误(我现在无法访问 4)。但是,我认为它可能在 Firefox 4 中工作,因为我刚买了一台新电脑,而且我不记得以前见过这个错误。 我有几个选择框。所选值
此 SQL 有何不同: 第一个: select * from table_1 a join table_2 b on a.id = b.acc_id 第二个: select * f
预选 的最佳做法是什么?在 ? 根据不同的网站,两者都有效。但是哪个更好呢?最兼容? Foo Bar 最佳答案 如果您正在编写 XHTML,则 selected="selected" 是必需的。 如
我使用 Angular JS 创建了一个多选选择框:下面是相同的代码: JS: $scope.foobars = [{ 'foobar_id': 'foobar01', 'name':
我在 jqGrid 中有几列 edittype="select"。如何读取特定行中当前选定值的选项值? 例如:当我提供以下选项时,如何获得 FedEx 等的“FE” editoption: { val
这是我更大问题的精简查询,但要点是我试图内部联接到一个选择,其中选择受到外部选择的限制。那可能吗?我在内部选择上收到有关多部分标识符 S.Item 和 S.SerialNum 的错误。 要点是这样的,
如果chat.chat_type IS NULL,我想选择user.*,但如果chat.chat_type = 1 我想选择组。* SELECT CASE WHEN ch
我正在编写一个小脚本来测试表单在提交之前是否已被更改。所以我可以使用普通输入(文本、文本区域等): if(element.defaultValue != element.value) { al
我正在尝试为 Prototype 编写一个插件,用户在其中单击下拉菜单并将其替换为多选元素。我快完成了。在用户选择他们想要显示的内容并将表单提交到同一页面之前,一切都很好。我正在使用 PHP 来使用
你如何在 MongoDB 中进行嵌套选择,类似于 SELECT id FROM table1 WHERE id IN (SELECT id FROM table2) 最佳答案 MongoDB 尚不具备
我有以下用于选择下拉列表的代码: {{unit.Text}} UnitOfMeasurements 数组中的每一项看起来像这样: Selected: false Text: "lb" Va
我正在尝试使用[选定]和[ngValue]来设置表单中包含对象的选择标记的默认值。但出于某种原因,它们似乎无法相提并论。。示例代码:。这段代码最终只显示空白作为缺省值。如果删除[ngValue],它就
我是一名优秀的程序员,十分优秀!