각도 2 : 서비스 변수 및 뷰 업데이트

Question

값이 0 인 값 서비스가 있습니다. 그러면 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 파일에서 전역 변수 설정이 끝나고 그 값을 업데이트했습니다. 또한 형제 컴포넌트 내부의 값도 업데이트했습니다.