Как узнать, что он загружается с помощью async & ngFor - PullRequest
Новая
       5

Как узнать, что он загружается с помощью async & ngFor

0 голосов
/ 23 ноября 2018

Я следую инструкции по использованию apollo angular для использования async в директиве ngFor: https://www.apollographql.com/docs/angular/basics/queries.html#rxjs

Я нашел способ проверить отсутствие данных: 

<ng-container *ngIf="something.length; else nothing"></ng-container>

Но я не могунайти способ отображения загрузочного счетчика во время загрузки данных.

Я пробовал это, но это не работает: 

*ngIf = "data | async as something; else loading"

Код в руководстве: 

import {Component, OnInit} from '@angular/core';
import {Apollo} from 'apollo-angular';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import gql from 'graphql-tag';

const FeedQuery = gql`
  query Feed {
    currentUser {
      login
    }
    feed {
      createdAt
      score
    }
  }
`;

@Component({
  template: `
    <ul *ngFor="let entry of data | async">
      Score: {{entry.score}}
    </ul>
  `,
})
class FeedComponent implements OnInit {
  data: Observable<any>;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.data = this.apollo
      .watchQuery({query: FeedQuery})
      .valueChanges.pipe(map(({data}) => data.feed));
  }
}

1 Ответ

0 голосов
/ 23 ноября 2018

Как отметил Мартин в комментарии, решение состоит в том, чтобы просто инициализировать цепочку чем-то другим, пока она не загрузится, чтобы мы могли проверить это значение в нашем шаблоне.

Очевидным является ноль. 

  .valueChanges.pipe(
    map(({ data }) => data.feed),
    startWith(null),
  );

Затем в коде вы можете использовать простой ngIf, чтобы проверить, загружается он или нет. 

<h1 *ngIf="(data | async) == null">Loading</h1>

Таким образом, мы все равно можем проверить наличие пустых (так как это будет пустой массив, не нуль)

Бриллиант.Спасибо.

...