[英]Angular 4 - pushing a new item to an array from an observable
I have a page where I display a list with locations
, and clicking on each of them I am displaying assets
for that location
. 我有一个页面,我显示一个包含
locations
的列表,然后点击它们中的每一个我显示该location
assets
。 I have set up the template like this: 我已经设置了这样的模板:
<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>
And in the component, I have set the empty assets
array, and an empty currentLocation
: 在组件中,我设置了空
assets
数组,并设置了一个空的currentLocation
:
locations: any[] = [];
currentLocation: any = {};
assets: any[] = [];
And then in the method select
I am fetching the assets like this: 然后在方法
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
);
}
What I would like to do is to since I am using the drag and drop plugin for Angular I would like to make it possible for user to drag assets from one location to another. 我想要做的是因为我使用Angular的拖放插件我想让用户可以将资源从一个位置拖动到另一个位置。 And then just temporarily push that asset to an array
assets
. 然后暂时将该资产推送到阵列
assets
。 I have made a function for that: 我已经为此做了一个功能:
onItemDrop(e: any, location:any = {}) {
this.assets = [];
this.assets.push(e.dragData);
this.select(location);
}
So, when a user drags and drops the asset from one location to another, I am emptying the assets
array, and pushing the new asset that was dragged to the array. 因此,当用户将资产从一个位置拖放到另一个位置时,我将清空
assets
数组,并推送拖动到数组的新资产。 But, then in the select
method I am getting all the assets
for that new location
that the asset
was dropped to, and that rewrites the assets
array. 但是,然后在
select
方法中,我获取asset
被删除的新location
所有assets
,并重写assets
数组。 How can I push to the same array those assets
, so that I have both the new asset
added and the assets
of that location
that I get from the service endpoint? 我如何将这些
assets
推送到同一阵列,以便我添加新asset
和从服务端点获得的该location
的assets
? I have tried another approach as well, where I was first emptying array assets, and then calling and passing new location
and new asset
to select
method: 我也尝试了另一种方法,我首先清空数组资产,然后调用并将新
location
和新asset
传递给select
方法:
onItemDrop(e: any, location:any = {}) {
this.assets = [];
this.select(location, e.dragData);
}
And then, in the select
method I have set the asset
parameter as optional, and then pushing it there to the assets
array after I got all the assets
for that location
from the service: 然后,在
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)}
);
}
But, that didn't work, the asset dropped to new location wasn't displayed in the template. 但是,这不起作用,资产下降到新位置没有显示在模板中。 How can I achieve that?
我怎样才能做到这一点?
Well in your first approach, you're overwriting your assets
array in your subscribe
function: 在您的第一种方法中,您将在
subscribe
功能中覆盖您的assets
数组:
this.locationService.getAssets(location.Id).subscribe(
assets => this.assets = assets
);
So obviously, the asset
you temporarily saved in that array is lost at this point. 显然,此时暂时保存在该阵列中的
asset
将丢失。
Your second approach makes more sense, but you're using subscribe
wrong in this example: 你的第二种方法更有意义,但你在这个例子中使用了
subscribe
错误:
this.locationService.getAssets(location.Id).subscribe(
assets => this.assets = assets,
if (asset) {this.assets.push(asset)}
);
In this case the if (asset) ...
part is passed as the second argument to your subscribe
call which is the error callback
. 在这种情况下,
if (asset) ...
部分作为第二个参数传递给您的subscribe
调用,这是error callback
。 You want to do it like this: 你想这样做:
this.locationService.getAssets(location.Id).subscribe( (assets) => {
this.assets = assets;
if (asset) {
this.assets.push(asset)
}
});
Hope it helps. 希望能帮助到你。
Update: I'm not even sure if that if (asset) ...
part, the way you implemented it, is even working as error callback. 更新:我甚至不确定是否
if (asset) ...
部分,您实现它的方式,甚至是作为错误回调。 you probably get an error there if that callback is called because a function is expected, not an expression (but as i said, i'm not sure about that). 如果调用该回调因为函数是预期的,而不是表达式(但正如我所说,我不确定),你可能会得到一个错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.