Angular2 SharedService传递ID作为默认值，但可以更改

我创建了一个sharedService()以获取特定位置中的所有项目，我已将默认ID值设置为3但我想要一个下拉菜单，可以在其中更改一个位置Id: 4, Id: 5。Angular2 SharedService传递ID作为默认值，但可以更改

private sourceSiteId = 3; 
getOriginSite() { 
    return this.http.get('http://www.example.com/api/Orders?sourceSite=' + this.sourceSiteId) 
     .map(res =>res.json()); 
    }

然后我把这个sharedService在我的组件得到它使用*ngFor的项目和输出，当用户改变位置也应该在选择的位置更新项目基地的名单。

编辑：我把错误的功能，那它应该是其中之一也被称为ngOnInit()

getOrdersFromOrigin() { 
    this.sharedService.getOriginSite() 
    .subscribe(data => { 
     this.items= data.Results 
}

项目列表ngFor这就需要选择位置时进行更新。这是导航的订单清单html

<nav></nav> 
<div *ngFor="let x of items"> 
<button>{{ x.name }}</button> 
</div>

此刻我只创建了一个虚拟位置来获取逻辑。这是来自导航组件，它是订单列表html中的子组件。

this.sourceSites = [ 
    { 
    'Id': 1, 
    'StoreLocation': 'Eastleigh' 
    }, 
    { 
    'Id': 2, 
    'StoreLocation': 'Portchester' 
    }, 
    { 
    'Id': 3, 
    'StoreLocation': 'Soho' 
    }, 
    { 
    'Id': 4, 
    'StoreLocation': 'Basingstoke' 
    } 
] 

<ul class="dropdown-menu"> 
    <li *ngFor="let store of sourceSites"><a href="javascript:;" (click)="changeSite(store.Id);">{{ store.StoreLocation}}</a></li> 
</ul>

更新这就是我，我传给位置ID在我的点击功能，然后我传递给服务。但是，这并不有3默认值，因为getOrderById()在ngOnInit被触发，那么则初始API调用将null

这是我ChildComponent changeSite（sourceSite）{ this.sharedService.getOriginSite（ sourceSite） .subscribe（数据=> { 的console.log（数据）; //给我想在父呈现ngFor 数据}） }

SharedService

getOriginSite(sourceSite) { 
    return this.http.get('http://myexample.com/api/Orders?sourceSite='+ sourceSite) 
     .map(res =>res.json()); 
    }

如何将sourceSite=3值更改为选定位置并在选择位置后更新列表？

来源

2016-12-05 MrNew

针对您的问题，您有不同的解决方案，具体取决于您构建应用程序的方式。

可以说你的下拉菜单是一个子组件，父母是调用该服务的组件。

在您的下拉菜单中，您将创建一个Output()，当值更改/用户单击时发出事件。

喜欢的东西：

public idChanged: EventEmitter<number> = new EventEmitter(); 

//Click handler 
public optionClicked(id: number): void { 
    this.idChanged.emit(id); 
}

然后父组件订阅到输出这样的：

<dropdown (idChanged)="changeId($event)"></dropdown>

而且在父类中，我们创建changeId()方法和调用服务更新列表与新的ID。

public changeId(id: number): void { 
    //Call service with the new Id. 
}

另一种解决方案是将ID存储在服务中，每次在下拉菜单中更改ID时，都直接使用ID更新服务。

来源

2016-12-05 15:47:09

我已经更新了我的帖子，我在'changeSite（id）'中传递了'Id'，然后传递给'SharedService'，它给了我想要在父html中呈现的对象，这是我坚持如何传递这个objs给父母的地方。我会尝试第一个解决方案。 – MrNew

Angular2 SharedService传递ID作为默认值，但可以更改

回答

相关问题