Наблюдаемая асинхронная труба не возвращает значения - PullRequest
Новая
       35

Наблюдаемая асинхронная труба не возвращает значения

2 голосов
/ 01 мая 2019

РЕДАКТИРОВАТЬ: ДЕМО РАБОЧЕГО КОДА

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

Рабочий можно найти здесь: https://stackblitz.com/edit/angular-ry1dev

Неработающий код:

products.component.ts: 

export class ProductsComponent implements OnInit {
  products$: Observable<Product[]>;

  //NOTE: this service is coming from Akita state management
  constructor( private productService: ProductService ) {}

  ngOnInit() {
    this.products$ = this.productService.getProducts();
  }
}

products.service.ts (управление состоянием Акиты): 

@Injectable({ providedIn: 'root' })
export class ProductService {
  constructor( private prodStore: ProductStore, private prodService: ProductsService ) {}

  getProducts() {
    return this.prodService.getProducts().pipe(
      tap( result => {
        let dataArr = [];
        for (let obj in result) {
          dataArr.push(result[obj]);
        }

        this.prodStore.add(dataArr)
      })
    )
  }
}

products.service.ts (http, вызываемый prodService выше): 

getProducts() {
  return this.http.get<Product[]>(`${this.API}/products`);
}

products.component.html: 

<mat-accordion *ngIf="products$" class='product-accordion'>
  <mat-expansion-panel *ngFor="let product of products$ | async">
    <mat-expansion-panel-header>
      SKU: {{ product.sku }}
    </mat-expansion-panel-header>

    <p>${{ product.price }}</p>
    <p>{{ product.description }}</p>

  </mat-expansion-panel>
</mat-accordion>

Приведенные выше компоненты магазина и запроса идентичны компонентам stackblitz.

Я должен получить список продуктов, например список задачв стеке, но в HTML он выдает ошибку:

ОШИБКА Ошибка: не удается найти другой поддерживающий объект «[объект]] типа« объект ».NgFor поддерживает только привязку к итерируемым объектам, таким как массивы.

Почему он работает со стеком, но не в моем приложении?

РЕДАКТИРОВАТЬ: ДЕМО-НЕ РАБОЧИЙ КОД

Ответы [ 2 ]

1 голос
/ 01 мая 2019

Не могли бы вы проверить, каков реальный ответ от вашего бэк-энда?Предполагается, что ваш пользовательский интерфейс выбирает массив, но кажется, что ваш сервер отвечает примерно так: 

{
  "something": {},
  "something": {}
}

ответ должен быть массивом, например: 

[
  "something": {},
  "something": {}
]

РЕДАКТИРОВАТЬ: Если мы не можем изменить поведение бэкэнда.Затем нам нужно обновить наш метод getProducts, чтобы он возвращал то, что требуется для нашей асинхронной привязки продуктов. 

getProducts() {
    return this.prodService.getProducts().pipe(
      map( result => {
        let dataArr = [];
        for (let obj in result) {
          dataArr.push(result[obj]);
        }

        this.prodStore.add(dataArr);
        return dataArr;
      })
    )
  }
0 голосов
/ 02 мая 2019

Проблема в том, что следующий код возвращает объект: 

getProducts() {
  return products;
}

И ngFor поддерживает только повторяемые объекты, такие как массивы.

Если вы хотите пойти по пути Акиты, вам нужно выбрать продукты, обновить магазин и запросить его в компоненте: 

this.products$ = this.productsQuery.selectAll();
...