角2：サービス変数とビューの更新

Question

値0を保持するValueServiceというサービスがあります。 次に、navコンポーネントと見出しコンポーネントがあります。 valueServiceの値は、クリック時の見出しビューを更新しません。私は角2のものを初めて使っているので、これをどうやって動かすかはわかりません。ここまで私がこれまで持っていたことがあります。ご協力いただきありがとうございます。コンポーネントテンプレート

を見出し

価値サービス

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 

@Injectable() 
export class ValueService { 
value:number; 

constructor() { 
    this.value = 0; 
} 

    goTo(value){ 
    this.value = value; 
    console.log('value in service', this.value); 
    } 

ナビゲーションコンポーネントテンプレートは

<button *ngFor="let d of array | keys; let i = index" (click)="valueService.goTo(i)"> {{ i }} </button> 

問題はここにあります。私は、navコンポーネントからボタンのインデックスによって選択されたh3を表示したいだけですが、何らかの理由でデフォルト値の0に設定されたままで、値は更新されません。

<h3 *ngIf="i==valueService.value" *ngFor="let d of array | keys; let i = index"> {{ text here }} </h1> 

Answer 1

あなたのサービスとnavコンポーネントは上手く見えます。

ヘッディングコンポーネントに2つのバインディングがあり、ngIfのiが定義されていないか、またはforループにバインドされていないという問題があります。注文を明示的にして、これが役立つかどうかを確認します。

<template ngFor let-d [ngForOf]="array" let-i="index"> 
    <h3 *ngIf="i==valueService.value"> 
     {{ text here }} 
    </h3> 
</template> 

また、あなたのH3タグはH1で閉じられ、エラー、ので、実際の角度もこれをコンパイルして、コンソールにそれについて文句を言うべきではない持っています。

Answer 2

jsonファイルでグローバル変数を設定してしまい、その値を更新しました。また、私の兄弟コンポーネント内の値も更新されました。