angularjs2：http-postの後の配列の更新

Question

http postの後にデータ配列を更新する正しい方法を知っています。

私は何を持っていることは、これらの方法でトランザクション・サービスである：

getUserTransactions(user_id) { 
    return this.http.get('http://localhost:3000/users/' + user_id + '/transactions', { headers: contentHeaders }) 
     .map(res => res.json()); 
    } 

createTransaction(balance, amount, user_id, paymethod_id, redirect) { 
    let body = JSON.stringify({ balance, amount, user_id, paymethod_id }); 
    this.http.post('http://localhost:3000/transactions', body, { headers: contentHeaders }) 
     .subscribe(
     response => { 
     this.router.parent.navigateByUrl(redirect); 
     }, 
     error => { 
     alert(error.text()); 
     console.log(error.text()); 
     } 
    ); 

とコンポーネント

export class HomeComponent { 

    public transactions: Transaction[]; 

    constructor(
    private router: Router, 
    private loginService: LoginService, 
    private trnService: TransactionService 
    ) { 
    if (!loginService.isLoggedIn()) 
     this.router.parent.navigateByUrl('/logout'); 

    var userid = this.loginService.getUserId(); 
    this.trnService.getUserTransactions(userid).subscribe(transactions => this.transactions = transactions); 

    return; 
    } 

    makeTransaction(){ 
    var userid = this.loginService.getUserId(); 
    this.trnService.createTransaction(10, 2, userid, 1, "/home"); 
    } 

} 

HTML：だから、最初

<tbody> 
    <tr *ngFor="#transaction of transactions; #index=index"> 
--- 

、「/ホームに移動して「ユーザートランザクションの配列をロードしています。

ボタンをクリックすると、makeTransaction()メソッドが呼び出されます。これはサービスTransactionService -> createTransactionによってhttp投稿要求を実行します。私はトランザクションが正常に終了した後に "/ home"にリダイレクトすると思ったが、これはうまくいきませんでした。（私はコンストラクタが再度呼び出されないと仮定します）何とかサービスからpublic transactions: Transaction[];を更新できますか？多分リファレンスを作っていますか？

Answer 1

すべてのトランザクションのリストで新しいトランザクションを表示したい場合。新しいトランザクションが完了したときに通知するために、リストとオブザーバブルの両方を含む共有サービスを活用してください。

コンポーネント内のtransactionsリストは、「トランザクションの作成」呼び出しにリンクされていません。ここで

は、サンプルの実装です：

export class HomeComponent { 
    public transactions: Transaction[]; 

    constructor(
    private router: Router, 
    private loginService: LoginService, 
    private trnService: TransactionService 
) { 
    if (!loginService.isLoggedIn()) 
     this.router.parent.navigateByUrl('/logout'); 

    var userid = this.loginService.getUserId(); 
    this.trnService.getUserTransactions(userid).subscribe(transactions => { 
     this.transactions = transactions; 
    }); 

    this.trnService.onTransactionCreated(transaction => { 
     this.transactions.push(transaction); 
    }); 

    return; 
    } 

    makeTransaction(){ 
    var userid = this.loginService.getUserId(); 
    this.trnService.createTransaction(10, 2, userid, 1, "/home"); 
    } 
} 

全体に対するサービスの単一のインスタンスを共有するには：あなたはコンポーネント内で通知され、トランザクションのリストを更新することができます

export class TransactionService { 
    private transactionObservable:Observable<any>; 
    private transactionObserver:Observer<any>; 

    constructor() { 
    this.transactionObservable((observer:Observer) => { 
     this.transactionObserver = observer; 
    }).share(); 
    } 

    notifyTransactionCreated(transaction:any) { 
    this.transactionObserver.next(transaction); 
    } 

    onTransactionCreated(callback:(transaction:any) => void) { 
    this.transactionObservable.subscribe(callback); 
    } 

    (...) 

createTransaction(balance, amount, user_id, paymethod_id, redirect) { 
    let body = JSON.stringify({ balance, amount, user_id, paymethod_id }); 
    this.http.post('http://localhost:3000/transactions', body, { headers: contentHeaders }) 
    .subscribe(
     response => { 
     this.notifyTransactionCreated(response.json()); // <------ 
     this.router.parent.navigateByUrl(redirect); 
     }, 
     error => { 
     alert(error.text()); 
     console.log(error.text()); 
     } 
    ); 
    } 
} 

この方法アプリケーションのブートストラップ時にサービスを指定するのを忘れないでください：

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    TransactionService 
]);