Обновленные поля компонента не изменяются в пользовательском интерфейсе
Я пытаюсь обновить переменную в компоненте, который отображается в пользовательском интерфейсе. После изменения содержимого переменной пользовательский интерфейс не обновился с измененным значением. Но в журналах я получаю правильный контент. Как это решить и почему это происходит?
Оба компонента являются потомками третьего компонента. (в основном детско-детское общение)
Первый компонент (OrderListComponent):
export class OrderListComponent {
page = 1;
Orderlist: SingleOrder[];
ngOnInit() {}
populateOrderList(){
this.service.refreshList()
.subscribe(
data => {
this.Orderlist = data;
this.page=2;
console.info(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.info(this.page);// printing as 2 in logs
})}
Хотел увидеть значение 2 в пользовательском интерфейсе, но получил только 1. Поскольку я новичок в angular 7, я не мог быстро найти. Пожалуйста, помогите мне в этом...
Ответы 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.info(this.page);// printing as 2 in logs
});
});
И когда событие сгенерировано, вы можете вызвать refreshList(), чтобы обновить свой компонент.
Это рабочий пример в Stackblitz: https://stackblitz.com/edit/angular-cancvb
Также вы вводите новый экземпляр компонента каждый раз, как вы это делали:
providers: [OrderListComponent]
Таким образом, сделанные вами изменения не отражаются в компоненте в DOM.
Спасибо за ваше четкое объяснение, и это сработало для меня.
Можете ли вы привести пример stackblitz?