javascript - Angular 4 - 将新项目从可观察对象推送到数组

Question

我有一个页面，我在其中显示了一个包含位置 的列表，然后单击每个列表我将显示该位置 的 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 方法中，我像这样获取 Assets :

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

我想做的是因为我正在使用 the drag and drop plugin for Angular我想让用户可以将 Assets 从一个位置拖到另一个位置。然后暂时将该 Assets 推送到数组 assets。 我为此做了一个函数:

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

因此，当用户将 Assets 从一个位置拖放到另一个位置时，我将清空 assets 数组，并将被拖动的新 Assets 推送到该数组。 但是，然后在 select 方法中，我得到了 asset 被删除的那个新 location 的所有 assets到，然后重写 assets 数组。 我怎样才能将那些 assets 推送到同一个数组，以便我同时添加新的 asset 和那个 location 的 assets 我从服务端点得到的？ 我也尝试了另一种方法，我首先清空数组 Assets ，然后调用并将新的 location 和新的 asset 传递给 select 方法:

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

然后，在 select 方法中，我将 asset 参数设置为可选，然后将其推送到 assets 数组我从服务中获取了该位置的所有 Assets :

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


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

但是，这没有用，放置到新位置的 Assets 没有显示在模板中。我怎样才能做到这一点？

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 调用，即 错误回调。你想这样做:

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

希望对您有所帮助。

更新: 我什至不确定那个 if (asset) ... 部分，你实现它的方式，是否甚至作为错误回调工作。如果调用该回调，您可能会在那里遇到错误，因为需要一个函数，而不是一个表达式(但正如我所说，我不确定)。