Question

我正在尝试更新正在UI上显示的组件中的变量。更改变量内容后，UI尚未使用更改后的值进行更新。但是在日志中，我得到了正确的内容。如何解决这个问题以及为什么会这样？

这两个组件都是第三个组件的子代。（基本上是儿童与儿童的交流）

第一个组件（OrderListComponent）：

export class OrderListComponent {
page = 1;
Orderlist: SingleOrder[];
ngOnInit() {}
populateOrderList(){
    this.service.refreshList()
    .subscribe(
    data => {
       this.Orderlist = data;
       this.page=2;
       console.log(this.page);// printing as 2 in logs
    })}

第一个组件HTML如下所示：

<label>{{page}}</label> // printing 1 as it is set by default in code

第二部分（调用方）：

 // Second component (Single-Order)
 @Component({
  providers: [OrderListComponent]
 })
 export class SingleOrderComponent implements OnInit {
constructor(private orderlist:OrderListComponent ) {}
onSubmit(form: NgForm) {
   this.orderlist.populateOrderList();
}}

我尝试通过使用更改检测器按如下方式更改第一个组件代码

第一个组件（OrderListComponent）：

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush//tried default strategy also but no change
})
export class OrderListComponent {
page = 1;
Orderlist: SingleOrder[];
ngOnInit() {}
populateOrderList(){
    this.service.refreshList()
    .subscribe(
    data => {
       this.Orderlist = data;
       this.page=2;
       this.cd.detectChanges(); // used this but no change
       // tried this.cd.markForCheck() , even no change
       console.log(this.page);// printing as 2 in logs
    })}

想在用户界面上看到值2，但只收到1。由于我刚接触Angular 7，因此无法快速找到。请帮我解决这个问题...

Answer 1

您不应注入其他组件与之通信，而应使用服务来完成这项工作。

在您的服务中有一个@Output属性，它将是一个EventEmitter：

@Output() triggerChange: EventEmitter<any> = new EventEmitter();

将此服务注入SingleOrderComponent并按如下所示调用emit方法的EventEmitter：

constructor(private service: CommunicationService) { }
 onSubmit(form: NgForm) {
    this.service.triggerChange.emit();
 }

在其他组件中，注入相同的服务并仅订阅此事件：

this.service.triggerChange.subscribe(()=>{
  this.service.refreshList()
    .subscribe(data => {
       this.page=2;
       console.log(this.page);// printing as 2 in logs
    });
  });

事件发出后，您可以调用refreshList()来更新组件。

这是Stackblitz中的一个有效示例： https://stackblitz.com/edit/angular-cancvb

同样，您每次也要注入一个新的组件实例：

providers: [OrderListComponent]

因此您所做的更改未反映在DOM的组件中。

UI上未更改已更新的组件字段

1 个答案: