#angular
#angular
Вопрос:
Я добавляю данные локально. И когда я добавляю, количество добавленных данных должно отображаться в компоненте значка. Но это происходит только после переключения на другую страницу. И мне нужно, чтобы данные отображались сразу после добавления.
Как это сделать?
quantity = 0;
ngOnInit() {
setTimeout( () => {
for (var i = 0; i < this.order.list.length; i ) {
this.quantity = this.order.list[i].quantity
}
}, 1000)
}
Комментарии:
1. Пожалуйста, включите фрагмент html / view для компонента badge, чтобы пользователи могли видеть, как вы привязываете данные.
Ответ №1:
Вы инициализируете свои данные в компоненте, фрагмент которого вы вставили.
Компоненты могут обмениваться данными (напрямую), передавая их другим компонентам (дочерним компонентам) в своем шаблоне — это достигается путем передачи данных в свойства в дочерних компонентах, аннотированных с @Input
помощью -decorator .
Передача данных другим способом (от дочернего элемента к родительскому) может быть выполнена путем отправки событий. Здесь в дочернем компоненте объявляется EventEmitter , аннотированный с @Output
помощью -decorator .
Если вы хотите обмениваться данными между компонентами без дочерних / родительских отношений, которые могут быть компонентами, загружаемыми Angular Router
, вы можете хранить данные в @Service
классе с аннотацией, который можно вводить с помощью механизма внедрения зависимостей Angular.
Все это объясняется (очень подробно) в руководстве Angular «Tour of Heroes» (которое можно найти здесь: https://angular.io/tutorial )
Комментарии:
1. Я уже сделал так, чтобы данные обменивались так, как мне нужно. Данные просто не отображаются в режиме реального времени.
2. В таком случае, я думаю, нам нужно увидеть ваш шаблон (и привязки)… Немного сложно помочь без «всей картинки». Есть ли какая-либо причина, по которой вы переносите вычисление количества в вызов
setTimeout
?
Ответ №2:
Попробуйте это,
import { Component, ElementRef, OnInit, ViewChild, ChangeDetectorRef, ViewRef } from '@angular/core';
constructor(private dtr: ChangeDetectorRef,){}
quantity = 0;
ngOnInit() {
setTimeout( () => {
for (var i = 0; i < this.order.list.length; i ) {
this.quantity = this.order.list[i].quantity
this.dtr.detectChanges();
}
}, 1000)
}