Angular 4 - Schieben eines neuen Elements zu einem Array von einer beobachtbaren

Question

Ich habe eine Seite, wo ich eine Liste mit locations anzeigen, und klicken Sie auf jede von ihnen Ich zeige assets für diese location. Ich habe die Vorlage wie folgt aufgebaut:

<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> 

Und in der Komponente habe ich die leeren assets Array gesetzt und eine leeres currentLocation:

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

Und dann in der Methode select Ich hole die Vermögenswerte wie folgt aus:

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 
    ); 
    } 

Was würde ich mag es zu tun, da ich the drag and drop plugin for Angular verwende ich mag wäre es possib machen Damit kann der Benutzer Assets von einem Ort zu einem anderen ziehen. Und dann schieben Sie das Asset nur vorübergehend in ein Array assets. Ich habe eine Funktion für das gemacht:

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

Also, wenn ein Benutzer per Drag & Drop den Vermögenswert von einem Ort zum anderen, ich bin das Leeren des assets Array und die neue Asset drängen, die auf das Array gezogen wurde . Aber dann in der select Methode bekomme ich alle assets für das neue location, dass die asset wurde fallen gelassen, und das schreibt die assets Array. Wie kann ich das gleiche Array diese assets, so dass ich sowohl die neue asset hinzugefügt und die assets dieser location, dass ich vom Service-Endpunkt bekommen habe? Ich habe versucht, auch einen anderen Ansatz, wo ich das erste Array Vermögen leerte und dann aufrufen und neue location und neue asset-select Methode:

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

Und dann, in der select Methode, die ich die asset gesetzt haben Parameter als optional, und drücken sie ihn dann dort zum assets Array, nachdem ich alle assets vom Dienst für das location bekam:

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


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

Aber, die nicht funktionierten, der Vermögenswert An den neuen Speicherort verschoben wurde in der Vorlage nicht angezeigt. Wie kann ich das erreichen?

Answer 1

Gut in Ihrem ersten Ansatz, werden Sie Ihre assets Array in Ihrer subscribe Funktion zu überschreiben:

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

So offensichtlich ist die asset Sie vorübergehend gespeichert in diesem Array an dieser Stelle verloren.

Ihr zweiter Ansatz macht mehr Sinn, aber Sie verwenden subscribe falsch in diesem Beispiel:

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

In diesem Fall wird der if (asset) ... Teil als zweites Argument zu Ihrem subscribe Anruf, der die error callback ist übergeben wird.Sie möchten es so machen:

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

Ich hoffe, es hilft.

Update: Ich bin nicht einmal sicher, ob das if (asset) ... Teil, die Art, wie Sie es implementiert, funktioniert sogar als Fehler Rückruf. Sie erhalten wahrscheinlich einen Fehler dort, wenn dieser Callback aufgerufen wird, weil eine Funktion erwartet wird, nicht ein Ausdruck (aber wie gesagt, ich bin mir nicht sicher darüber).