Angulaire 4 - pousser un nouvel élément à un tableau à partir d'une observable

J'ai une page où j'affiche une liste avec locations, et en cliquant sur chacun d'eux, je me suis affichant assets pour que location. J'ai mis en place le modèle comme ceci:

<li
    *ngFor="let location of locations"
    (click)="select(location)"
    droppable
    [dragOverClass]="'drag-target-border'"
    (onDrop)="onItemDrop($event, location)"
    >
      {{ location.name }}
      <ul *ngIf="currentLocation == location && assetsVisible">
        <ng-container *ngIf="currentLocation.assets?.length > 0;else message">
          <li
            *ngFor="let asset of currentLocation.assets"
            class="asset"
            draggable
            [dragData]="asset"
            >
            <p>{{ asset.title }}</p>
            <p>{{ asset.address }}</p>
            <p>{{ asset.value }}</p>
          </li>
        </ng-container>
        <ng-template #message>No assets for {{ location.name }}</ng-template>
      </ul>
  </li>

Et dans le composant, j'ai mis le vide assets tableau, et un vide currentLocation:

  locations: any[] = [];
  currentLocation: any = {};
  assets: any[] = [];

Et ensuite, dans la méthode select je suis aller chercher de l'actif comme ceci:

  select(location:any = {){

    if (this.currentLocation != location || !this.assetsVisible) {
      this.assetsVisible = true;
    }
    else {
      this.assetsVisible = false;
    }

    this.currentAddress = address;

    this.locationService.getAssets(location.Id)
      .subscribe(
        assets => this.assets = assets
      );
  }

Ce que j'aimerais faire, c'est depuis que je suis en utilisant le glisser-déposer plugin Angulaire je voudrais faire il possible pour l'utilisateur de faire glisser des actifs d'un endroit à l'autre. Et puis juste temporairement pousser cet actif à un tableau assets.
J'ai fait une fonction pour ça:

onItemDrop(e: any, location:any = {}) {
   this.assets = [];
   this.assets.push(e.dragData);        
   this.select(location);
}

Ainsi, lorsqu'un utilisateur fait glisser et les gouttes de l'actif d'un endroit à un autre, je suis la vidange de la assets tableau, et en poussant le nouveau actif qui a été traîné dans la matrice.
Mais, ensuite, dans la select méthode que j'ai toutes les assets pour que les nouveaux location que le asset a été abandonné, et qui réécrit l' assets tableau.
Comment puis-je pousser à la même matrice ceux assets, de sorte que j'ai à la fois la nouvelle asset ajouté et le assets de location que je l'obtenir à partir du point de terminaison de service?
J'ai essayé une autre approche, où j'ai d'abord vider tableau actifs, puis de l'appelant et à l'adoption d'une nouvelle location et de nouvelles asset à select méthode:

onItemDrop(e: any, location:any = {}) {
    this.assets = [];
    this.select(location, e.dragData);
  }

Et puis, dans le select méthode que j'ai mis le asset paramètre facultatif, et d'aller ensuite il y à la assets tableau après j'ai eu toutes les assets pour que location du service:

select(location:any = {}, asset?:any = {}) {


    this.locationService.getAssets(location.Id)
      .subscribe(
        assets => this.assets = assets,
        if (asset) {this.assets.push(asset)} 
      );
  }

Mais, cela ne fonctionne pas, l'actif a chuté à un nouvel emplacement n'était pas affiché dans le modèle. Comment puis-je y parvenir?

OriginalL'auteur Leff | 2017-06-09

  1. 2

    Bien dans votre première approche, vous êtes d'écraser votre assets tableau dans votre subscribe fonction:

    this.locationService.getAssets(location.Id).subscribe(
    assets => this.assets = assets
);

    Alors, évidemment, la asset vous temporairement enregistrées dans ce tableau est perdu à ce point.

    Votre deuxième approche qui a plus de sens, mais vous êtes en utilisant subscribe mal dans cet exemple:

    this.locationService.getAssets(location.Id).subscribe(
    assets => this.assets = assets,
    if (asset) {this.assets.push(asset)} 
);

    Dans ce cas, le if (asset) ... partie est passée en deuxième argument de votre subscribe appel qui est le error callback. Vous voulez le faire comme ceci:

    this.locationService.getAssets(location.Id).subscribe( (assets) => {
    this.assets = assets;
    if (asset) {
         this.assets.push(asset)
    } 
});

    Espère que cela aide.

    Mise à jour:
    Je ne suis même pas sûr si c' if (asset) ... partie, la façon dont vous avez mis en place, est même travail que l'erreur de rappel. vous avez probablement une erreur si cette callback est appelée comme une fonction est prévu, pas une expression (mais comme je l'ai dit, je ne suis pas sûr à ce sujet).

    C'est l'erreur, je vous remercie beaucoup pour votre aide!

    OriginalL'auteur lexith