locations
のリストを表示するページがあり、それぞれをクリックすると、assets
のlocation
が表示されます。私はこのようにテンプレートを設定しました:
<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
メソッドで、assets
がドロップされた新しいlocation
のすべてのasset
を取得し、assets
配列を書き換えます。これらのassets
を同じ配列にプッシュして、新しいasset
を追加し、そのassets
のlocation
をサービスエンドポイントから取得する方法を教えてください。私は別のアプローチも試しましたが、最初に配列アセットを空にしてから、新しいlocation
と新しいasset
を呼び出してselect
メソッドに渡しました。
onItemDrop(e: any, location:any = {}) {
this.assets = [];
this.select(location, e.dragData);
}
次に、select
メソッドでasset
パラメータをオプションとして設定し、サービスからassets
のすべてのassets
を取得した後、location
配列にプッシュしました。
select(location:any = {}, asset?:any = {}) {
this.locationService.getAssets(location.Id)
.subscribe(
assets => this.assets = assets,
if (asset) {this.assets.Push(asset)}
);
}
しかし、それは機能しませんでした。新しい場所にドロップされたアセットはテンプレートに表示されませんでした。どうすればそれを達成できますか?
最初のアプローチでは、assets
関数のsubscribe
配列を上書きしています。
_this.locationService.getAssets(location.Id).subscribe(
assets => this.assets = assets
);
_
したがって、明らかに、その配列に一時的に保存したasset
は、この時点で失われます。
2番目のアプローチはより理にかなっていますが、この例ではsubscribe
を間違って使用しています。
_this.locationService.getAssets(location.Id).subscribe(
assets => this.assets = assets,
if (asset) {this.assets.Push(asset)}
);
_
この場合、if (asset) ...
部分は、2番目の引数として_error callback
_であるsubscribe
呼び出しに渡されます。あなたはこのようにしたいです:
_this.locationService.getAssets(location.Id).subscribe( (assets) => {
this.assets = assets;
if (asset) {
this.assets.Push(asset)
}
});
_
それが役に立てば幸い。
更新:if (asset) ...
の部分、つまり実装方法がエラーコールバックとして機能しているかどうかさえわかりません。式ではなく関数が予期されているためにコールバックが呼び出されると、おそらくエラーが発生します(ただし、先ほど述べたように、それについてはわかりません)。