更新输入变量时子组件不更新 - Angular

Question

我有子组件，在此我将父组件的值作为输入传递。在父组件中，我在事件发射器触发器上更新了这个输入变量，但子组件没有更新。我已经检查了输入变量更新的预兆。为什么子组件不更新？

ParentComponent.html

<app-child
[data]="data"
(filterEmmiter)="filter($event)">
</app-child>

ParentComponent.ts

data: any;
.
.
.
getUsers() {
  this.usersService.getAllUsers().subscribe(res => {
    this.data = res;
  });
}
.
.
.

filter(data){
  this.data = data
}

Answer 1

您的子组件应该公开一个 EventEmitter。

 @Output() filteremmiter = new EventEmitter<any>();

Answer 2

你可以这样试试，这里你想从parent组件获取数据到child组件，这里你的parent组件是ParentComponent和child 组件是 app-child 所以这里为了获取从 parent 到 child 的数据我们可以使用 ngOnChanges(changes: SimpleChanges)

ParentComponent.html

<app-child
[data]="data"
(filterEmmiter)="filter($event)">
</app-child>

child.component.ts


import {Component, OnChanges, SimpleChanges, Input} from '@angular/core';

class Child  implements OnInit, OnChanges {

    @Input() Data: any; // here is the data variable which we are getting from the parent 

    constructor() {}

    ngOnchanges(changes: SimpleChanges) {
      console.log(changes); // here you will get the data from parent once the input param is change
    }   

}

Answer 3

最近我也遇到了类似的事情，在我的情况下，在子对象中使用 Onchanges 方法，我看到输入更改发生在我想要执行的逻辑之后，然后输入的新值没有'这个逻辑没有体现出来。

我所做的是在我分配输入数据的地方强制检测更改，如下所示：

我将其添加到我的构造函数中

 constructor( private changeDetector: ChangeDetectorRef) {}

然后我给数据赋值

this.data=something
this.changeDetector.detectChanges();

在那之后，我注意到首先调用了 onChanges 方法，然后调用了输入新值的逻辑，之后我只是手动设置了应该放在 Onchanges 方法中的输入值子组件

 ngOnChanges(changes: SimpleChanges): void {
    this.put= changes.input.currentValue;
  }

更新输入变量时子组件不更新 - Angular

child component doesn't update when I update input variable - Angular

render

updates

angular