Angular 4 - 將一個新項目從一個可觀察的數據推送到一個數組

Question

我有一個頁面，我顯示一個包含locations的列表，然后點擊它們中的每一個我顯示該location assets 。 我已經設置了這樣的模板：

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

在組件中，我設置了空assets數組，並設置了一個空的currentLocation ：

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

然后在方法select我正在獲取這樣的資產：

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

我想要做的是因為我使用Angular的拖放插件我想讓用戶可以將資源從一個位置拖動到另一個位置。 然后暫時將該資產推送到陣列assets 。 我已經為此做了一個功能：

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

因此，當用戶將資產從一個位置拖放到另一個位置時，我將清空assets數組，並推送拖動到數組的新資產。 但是，然后在select方法中，我獲取asset被刪除的新location所有assets ，並重寫assets數組。 我如何將這些assets推送到同一陣列，以便我添加新asset和從服務端點獲得的該location的assets ？ 我也嘗試了另一種方法，我首先清空數組資產，然后調用並將新location和新asset傳遞給select方法：

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

然后，在select方法中，我將asset參數設置為可選，然后在從服務獲取該location所有assets后將其推送到assets數組：

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


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

但是，這不起作用，資產下降到新位置沒有顯示在模板中。 我怎樣才能做到這一點？

Answer 1

在您的第一種方法中，您將在subscribe功能中覆蓋您的assets數組：

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

顯然，此時暫時保存在該陣列中的asset將丟失。

你的第二種方法更有意義，但你在這個例子中使用了subscribe錯誤：

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

在這種情況下， if (asset) ...部分作為第二個參數傳遞給您的subscribe調用，這是error callback 。 你想這樣做：

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

希望能幫助到你。

更新：我甚至不確定是否if (asset) ...部分，您實現它的方式，甚至是作為錯誤回調。 如果調用該回調因為函數是預期的，而不是表達式（但正如我所說，我不確定），你可能會得到一個錯誤。