模型更改后角度2视图不更新

即使我的模型明确更新，也无法让我的视图更新。尝试使用NgZone，但它没有帮助。模型更改后角度2视图不更新

我在两个组件中注入RouteService：app.component和start-page-list.component。 RoutService使用除组件之间传递数据：如预期，但启动页面list.component不

import { Injectable } from '@angular/core'; 
import { Round } from "app/round"; 
import { Subject } from "rxjs/Subject"; 

@Injectable() 
export class RoundService { 

    private roundSource = new Subject<Round>(); 

    roundItem$ = this.roundSource.asObservable(); 

    changeRound(value:Round) { 
    this.roundSource.next(value); 
    } 
}

app.components视图获取更新。

app.component：

import { Component } from '@angular/core'; 
import { Http } from "@angular/http"; 
import 'rxjs/add/operator/toPromise'; 
import { RoundService } from "app/round.service"; 
import { Round } from "app/round"; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <div class="container"> 
    <div class="page-header"> 
    <h1>{{currentRound.id}}</h1> 
    </div> 
    </div> 
    <router-outlet></router-outlet> 
    `, 
    styleUrls: [] 
}) 
export class AppComponent { 
    currentRound: Round = {id:0,name:"No round set yet"}; 

    constructor(private http: Http, private round : RoundService) { } 

    callBackFunc(data:Round) { 
    this.currentRound = data; 
    } 

    ngOnInit() { 
    this.round.roundItem$.subscribe(
     (data:Round) => this.callBackFunc(data) 
    ); 
    } 
}

这里currentRound.id更新！

启动页list.component（在app.component在路由器出口呈现）：

import { Component, OnInit, Input, NgZone } from '@angular/core'; 
import { PlayerService } from "app/player.service"; 
import { Game } from "app/game"; 
import { Player } from "app/player"; 
import { GameService } from "app/game.service"; 
import { RoundService } from "app/round.service"; 
import { Round } from "app/round"; 
import 'rxjs/add/operator/toPromise'; 

@Component({ 
    selector: 'app-start-page-list', 
    template: `{{currentGameset.id}}`, 
    styleUrls: [] 
}) 
export class StartPageListComponent implements OnInit { 

    currentGameset:Round = {id:0,name:'No round set yet'}; 

    constructor(private gameService: GameService, private roundService: RoundService, private zone: NgZone) { } 

    callbackFunc(data:Round) { 
    this.currentGameset = data; 
    console.log("currentGameset.id= " + this.currentGameset.id); 
    } 

    ngOnInit() { 
    this.roundService.roundItem$.subscribe(
     (data:Round) => this.zone.run(() => this.callbackFunc(data)) 
    ); 
    } 

}

这里没有更新currentGameset.id即使模型（控制台日志显示更新后的值）。正如你所看到的我尝试过使用NgZone。

有什么建议可能是错误的吗？

编辑如果我把启动页面list.component作为子组件到app.component我没有得到问题。然后视图得到更新，如我所料。这个问题似乎只在我使用组件的router-outlet渲染时才会出现。

来源

2017-04-11 John

你在哪里叫'changeRound'？ – echonax

另一个由router-outlet渲染的组件。 – John

原来，在服务中使用BehaviorSubject而不是Subject是解决方案！

有人在乎解释为什么？

来源

2017-04-13 19:15:04 John

当你做currentGameset = data，你打破了模板所指的。你会认为它会继续引用当前的游戏集，但这不是它的工作原理！

尝试添加一个包装器currentGameset像：

gameSetParent = { 
    currentGameset: {id:0,name:'No round set yet'}; 
}

在回调FUNC，

this.gameSetParent.currentGameset = data;

您需要更新模板，以反映这一变化。

来源

2017-04-11 22:25:49 bakerhumadi

这并不能解释为什么它对app.component.html中的currentRound有效。顺便尝试了一下你的建议，我没有任何运气。 – John

模型更改后角度2视图不更新

回答

相关问题