Observables<Tableau> Angular2

J'ai un tableau d'objets dans mon Angular2 application. Je suis SignalR pour remplir la matrice de lorsque de nouveaux objet arrive. Maintenant, le point, c'est quand un nouvel objet est arrivé, j'ai eu l'erreur

impossible de lire la propriété de undefined

J'ai roulé qu'il pourrait être l'erreur parce que son travail asynchrone et en html, j'ai utilisé pour prendre des objets à l'intérieur de l'objet.

Alors maintenant, le code ressemble:

<div *ngFor="let event of events">
        <div class="card overview">
            <div class="overview-content clearfix ">
                <span class="overview-title" pTooltip="{{event.name}}">{{(event | async)?.user?.name}} / {{(event | async)?.date | date:"HH:mm" }}</span>
                <span class="overview-badge "> <i class="material-icons ">{{getActivityIcon(event.activityId)}}</i>
            <button type="button" pButton (click)="selectEvent($event,event,op);" icon="fa-search"></button> 
            </span>

            </div>
        </div>
    </div>

Et maintenant l'erreur est

NgFor prend uniquement en charge la liaison à Iterables comme des Tableaux.

Mon tableau d'objet est un composant et de regarder comme ci-dessous:

events: Observable<Event[]>;

Je comprends l'erreur, mais comment puis-je le faire fonctionner maintenant?

  • Ajouter le | async à la fin de votre *ngFor
  • TypeError: Cannot read property 's'abonner' undefined
  • Vous pouvez vous abonner à la observables au sein de votre composante et définir les données à des événements de la propriété.
  • je pense que le events n'est pas initialisé dans votre composant, montrer plus de code
InformationsquelleAutor miechooy | 2017-03-10
  1. 10

    Semble que vous n'êtes pas sûr de savoir quelle est la différence entre async pipe et subscribe, puisque vous utilisez un étrange mélange dans votre modèle de code. Soit utiliser la async pipe ou "manuellement" s'abonner. Async pipe ne l'abonnement pour vous et ne devraient pas être utilisés ensemble avec subscribe.

    Court d'exemples simples, la première utilisation de async pipe:

    Service:

    getEvents(): Observable<Event[]> {
  return this.http.get('url')
    .map(res => res.json())
}

    Composant de nous affecter que les observables de nos observables events:

    events: Observable<Event[]>;

ngOnInit() {
  this.events = this.myService.getEvents();
}

    En HTML, nous utilisons async pipe qui ne l'abonnement pour nous:

    <div *ngFor="let event of events | async">
  {{event.name}}
</div>

    ...Aaaand puis l'utilisation de subscribe:

    La méthode de service serait le même, la différence est dans le composant de:

    events: Event[] = [];

ngOnInit() {
  this.myService.getEvents()
    .subscribe(data => {
       this.events = data;
    });
}

    HTML:

    <div *ngFor="let event of events">
  {{event?.name}}
</div>

    Ici, je pense que vous aurez mélangé async pipe avec asynchrone des données récupérées. Ainsi, le async pipe n'est pas utilisé de manière asynchrone des données récupérées, mais pour vous abonner à Observables.

    Et cela nous amène à l'asynchrone de données, donc si vous utilisez subscribe, vous devez initialiser le tableau et peut-être besoin d'utiliser le la sécurité de la navigation de l'opérateur ou si vous le souhaitez, *ngIf, dans votre modèle cela ne veut pas rendre cette partie du modèle, sauf s'il existe des données dans events. Mais je préfère la sécurité de la navigation de l'opérateur 😉

    Espère que cela a aidé et apporté quelques éclaircissements 🙂

    InformationsquelleAutor AJT_82
  2. 0

    Je pense que c'est ce que vous cherchez.

    La AsyncPipe accepte une Promesse ou Observables en entrée et s'inscrit à l'entrée automatiquement, finissent par rentrer les émissions de valeurs.

    Angulaire.io - AsyncPipe

    InformationsquelleAutor shammelburg