Angular 2:更新服务变量和视图

Angular 2: Update service variables and the view

本文关键字：变量 视图 服务 更新 Angular      更新时间：2023-09-26

我有一个名为ValueService的服务，它的值为0。然后我有一个导航组件和一个标题组件。valueService中的值，不会在点击时更新标题视图。我是新的角度2的东西，所以我不知道如何得到这个工作。这是我目前所知道的。谢谢你的帮助。

<<p> 价值服务/strong> 
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>

你的service和nav组件看起来很好。

你可能会遇到这样的问题:在你的heading组件中，你有两个绑定，而ngIf中的i没有定义或没有绑定到for循环。我会把顺序明确一点，看看这是否有帮助。

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

你也有一个错误，你的h3标签以h1结束，所以实际上angular甚至不应该编译这个，并在控制台上抱怨它。

我最终在json文件中设置了一个全局变量，并更新了该值。它也更新了兄弟组件中的值。

相关文章：