Блог

Я пытаюсь обновить переменную в компоненте, который отображается в пользовательском интерфейсе. После изменения содержимого переменной пользовательский интерфейс не обновился с измененным значением. Но в журналах я получаю правильный контент. Как это решить и почему это происходит?

Оба компонента являются дочерними по отношению к третьему компоненту. (В основном дочерняя связь)

Первый компонент (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, не удалось быстро найти. Пожалуйста, помогите мне в этом…

Вы не должны вводить другие компоненты для взаимодействия с ними, вместо этого вы должны использовать сервис для выполнения этой работы.

В вашем сервисе есть @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.