Javascript 角度4-将一个新项目从一个可观察对象推到一个数组中

我有一个页面，其中显示了一个包含

位置的列表，单击其中的每个位置，我将显示该
位置的
资产
。我已经设置了如下模板：

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

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

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

然后在方法
select
中，我获取的资产如下所示：

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

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

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

我想做的是，由于我正在使用，我想让用户能够将资产从一个位置拖到另一个位置。然后将该资源临时推送到数组
assets
。
我为此做了一个函数：

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

因此，当用户将资源从一个位置拖放到另一个位置时，我清空
资源
数组，并将拖动到数组中的新资源推送到数组中。
但是，在
select
方法中，我将获得
资产
被拖放到的新
位置
的所有
资产，这将重写
资产
数组。
如何将这些
资产
推送到同一个数组中，以便添加新的
资产
，以及从服务端点获得的
位置的
资产
？
我还尝试了另一种方法，首先清空数组资产，然后调用new
location
并将new
asset
传递给
select
方法：

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

然后，在
选择
方法中，我将
资产
参数设置为可选参数，然后在我从服务获取该
位置
的所有
资产
后，将其推送到
资产
数组：

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


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

但是，这不起作用，拖放到新位置的资产没有显示在模板中。如何实现这一点？
在第一种方法中，您正在覆盖
subscribe
函数中的
资产
数组：

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

因此，显然，您临时保存在该数组中的
资产
此时将丢失

第二种方法更有意义，但在本例中使用的
subscribe
是错误的：

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

在这种情况下，
if（asset）…
部分作为第二个参数传递给
subscribe
调用，该调用是
错误回调
。您希望这样做：

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

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

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

希望能有帮助

更新：
我甚至不确定这个
if（asset）.
部分，您实现它的方式，是否作为错误回调。如果调用回调是因为需要函数，而不是表达式（但正如我所说，我不确定这一点），则可能会出现错误。
这是个错误，非常感谢您的帮助！