Как отобразить сразу добавленные данные?

#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)
  }