*ng, потому что просто не работает с массивом объектов

У меня есть код TS

      getItems().subscribe(val=>{
this.items=val;
})

который отлично работает. Когда я console.log(this.items) я получаю

      "array:0{size:XL,quantity:1}"

Бууут. Удивительно, но то, с чем я никогда раньше не сталкивался в angular, когда я запускаю код в html-шаблоне

      <div *ngFor="let item of items">
{{item.size}}
</div

items =[{size:'XL', количество:4}] Я АБСОЛЮТНО НИЧЕГО не получаю. Это действительно странно, потому что я написал сотни таких заявлений и никогда раньше не сталкивался с этой проблемой. Помогите, пожалуйста.

Решено:

Я понял, что вызов getItems() с объектом, где метод getItems возвращает объект asobservable, может выполняться ТОЛЬКО в том же компоненте, непосредственно после заполнения объекта. Заполнение темы до изменения страницы, похоже, все еще позволяет передавать данные достаточно для входа в консоль, но не для использования более крупным приложением.

Итак, делая

      updateItems(items);
getItemsUpdated().subscribe(val=>{
this.items=val
})

где есть тема и

      updateItems(items:items){
this.subject.next(items)
}
getItemsUpdated(){
return this.subject.asObservable()
}

будет работать, но только при вызове непосредственно рядом друг с другом в одном и том же компоненте.
Поскольку в этом случае я обновлял тему, переключал страницы, а затем вызывал тему, я испытывал странную неопределенность темы, когда консоль все еще могла записывать значение, переданное субъекту, но это не разрешалось полностью принимающим компонентом и, следовательно, не работал с *ngFor.

Правильный поток

      updateItems(items);
---------->Navigate to next page-------->
getItemsUpdated().subscribe(val=>{
this.items=val
})

где есть тема поведения и

      updateItems(items:items){
this.behaviorSubject.next(items)
}

getItemsUpdated(){
return this.behaviorSubject.asObservable()
}

В этом случае использование BehaviorSubject вместо Subject позволило корректно обрабатывать данные «вовремя» и работать с приложением. Спасибо всем за ваш вклад!

Источник

3 ответа

Решение

Вы должны использовать BehaviorSubject или ReplaySubject; простой Subjectпредоставит вам только значения, выданные после подписки.

      export class CartService {
  public cartUpdated: Subject<Item[]> = new BehaviorSubject([]);

Дополнительная информация в: Subject vs BehaviorSubject vs ReplaySubject в Angular

Фиксированный Stackblitz

Источник

Вы можете ничего не делать, пока не получите результаты своего http-запроса.

      <div *ngIf="items">
  <div *ngFor="let item of items">
    {{item.size}}
  </div>
</div>

или даже вы можете использовать async трубка

        <div *ngFor="let item of items | async">
    {{item.size}}
  </div>
Источник

Ваш stackblitz не позволяет ngFor, поэтому установка должна быть неправильной. Вот в чем, я думаю, проблема:

В вашем приложении странный поток данных: когда вы подписываетесь на наблюдаемый объект, вы не получите никаких данных, пока что-то не вызовет следующий вызов по вашей теме. Судя по тому, что я видел в вашем stackblitz, вы, кажется, делаете:

  1. Вызов обновления, который даст значение вашей теме
  2. Ты подписываешься и уже поздно

Вы не можете получить последнее значение от темы, и, поскольку вы подписались слишком поздно, ваш console.log из подписки на самом деле ничего не делает. Вы видите console.log, связанный с вашим обновлением (то, что из компонента hello)

Источник
Другие вопросы по тегам