Angular2 SharedServiceはデフォルトとしてIDを渡しますが、変更可能です

Question

sharedService()を作成して、特定の場所にあるすべてのアイテムを取得しました。デフォルトのID値は3ですが、変更できるドロップダウンメニューがあります。ロケーションId: 4, Id: 5。

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

はその後、私は、ユーザーの変更の場所が、それはまた、選択した場所にアイテムベースのリストを更新する必要がある場合、それは*ngFor使用してアイテムや出力を得るために、私のコンポーネントでこのsharedServiceを呼び出します。

編集：私は間違った機能を入れて、それはまた、場所を選択するときに更新する必要があるngOnInit()

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

項目リストngForに呼ばれているこのいずれかでなければなりません。これは、

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

というようにnavを持つオーダーリストhtmlです。現時点では、ロジックを取得するためのダミーの場所しか作成していません。これは、注文リストhtmlの子コンポーネントであるnavコンポーネントからのものです。

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を渡し、私が持っているものです。 getOrderById()がngOnInitにトリガされているので、最初のAPIコールが、その後null

これは私のChildComponent changeSite（SourceSiteの）{ this.sharedService.getOriginSite（にあるだろうので、しかし、これは、3のデフォルト値はありません。 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の値を選択した場所に変更し、場所を選択したらリストを更新するにはどうすればよいですか？

Answer 1

あなたのアプリをどのように構造化したかによって、問題の解決方法は異なります。

あなたのドロップダウンは子コンポーネントで、親はサービスを呼び出すものです。

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

もう1つの解決策は、サービスにIDを格納することです。IDがドロップダウンで変更されるたびに、IDでサービスを直接更新します。