更改检测不注册数据更改

我有一个组件内部组件的HTML结构（忘记了适当的单词）。更改检测不注册数据更改

basicly这样工作（大大简化）：

主要的html：

<div *ngFor="let item of data"> 
    <app-item [item]="item"></app-item> 
</div> 

<button (click)="addItem()">Add</button>

项目的html：

<div>{{item.name}}</div> 

<button (click)="deleteItem()">Delete</button>

应用项目中我展示几个项目从列表。该列表通过http.get请求直接从数据库中获取数据。

现在我还可以添加或删除两个工作项目（项目分别添加到数据库或从数据库中删除项目）。尽管更改检测没有选择任何项目，并且需要刷新站点（例如，通过F5）以显示更改。

我检查了代码（不是全部来自我），也找不到任何指定的更改检测策略。

我还尝试通过ChangeDetectorRef（this.ref.detectChanges();）手动调整添加和删除功能中的变化检测。尽管这也没有消除手动刷新页面以查看更改的需要。

现在我缺少什么改变检测来挑选它？或者，如何在添加/删除方法中手动触发它？

来源

2017-08-04 m41n

_change检测不挑它的任何_ - 什么做你期望发生？ 'addItem'和'deleteItem'做什么？ –

它调用服务，http.post和http.delete请求，因为数据来自http.get我认为变化检测会捡起来 – m41n

@ m41n那么Angular不会自动激发你没有告诉角的请求去做。因此，您需要激发'get'请求以从后端获取“更新”数据。 – Alex

由于您正在添加或删除现有数组中的元素，角度无法挑选更改。

对于这个工作，你可以像使用数组的相同元素的新对象

分配数组引用作为items= items.slice();
或者你可以使用Object.assign方法items= Object.assign([],items);
这两个东西应该是在对数组进行更改后完成。

手动火灾变化检测可以遵循回答on this link： -

进样ChangeDetectorRef在组件，然后手动使用该对象的detectChanges()方法火灾变化检测。像

constructure(private cd: ChangeDetectorRef()){} 
someMethod(){ 
    cd.detectChanges(); 
}

来源

2017-08-04 07:08:43

ChangeDetectorRef的第二个选项，我居然尝试过。没有带来想要的结果 – m41n

您可以尝试第一个选项，因为如果您通过角度文档更改检测机制。它提到，如果你添加数组中的元素或从数组中移除元素，变化检测可能不会被自动触发。因为你没有改变它指向相同引用的对象。所以尝试通过使用切片或使用Object.assign来分配一个新的对象。你可以找到更好的描述，在回答这个问题https://stackoverflow.com/questions/34796901/angular2-change-detection-ngonchanges-not-firing-for-nested-object –

有点晚回答，但我基本做了现在是第一个选项，在删除时从“local”数组添加和拼接时推入“local”数组。棘手的部分是删除是在一个子组件上完成的，我不知道当我通过@Input传递数组时，我可以直接在子组件中处理它。无论如何，晚点再好，永远不会，接受答案。 – m41n

添加ChangeDetectionStrategy这可能会解决您的问题，但在GENRAL应该拿起角可能是别的东西缠着你的代码

@Component({ 
    // ... 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class MovieComponent { 
    // ... 
}

来源

2017-08-04 07:24:11

我不完全确定，但与OnPush其他地方的变化检测确实触发的代码中可能不再工作 – m41n

雅我想你需要强制更改检测，但我希望你正在使用组件的具体逻辑 –

上面的答案中的Prathmesh Dali实际上使我想到了一种可能的解决方案，我现在正在尝试将每个http服务的新数据发送到数据库，同时操作数据数组的“本地副本”为变化检测拿起 – m41n

更改检测不注册数据更改

回答

相关问题