【问题标题】:Angular2 View not updating after variable changeAngular2 View在变量更改后不更新
【发布时间】:2016-12-11 17:50:08
【问题描述】:

我有这个组件(还有另一个有同样问题的组件)。当字段值更改时,视图不会更新,我什至尝试强制进行更改检测,但没有成功。

Angular-cli 1.0.0-beta.10
Angular 2.0.0-rc.4

Component.js

import {Component, OnInit, OnDestroy, ChangeDetectorRef} from '@angular/core';
import {Control} from '@angular/common';
import {WebsocketService} from './websocket.service';


@Component({
  moduleId: module.id,
  selector: 'chat',
  template: `<div *ngFor="let message of messages">
                     {{message.text}}
                   </div>
                   <input [(ngModel)]="message"  /><button (click)="sendMessage()">Send</button>`,
  providers: [WebsocketService]
})


export class DummyWebsocketComponent implements OnInit, OnDestroy {
  messages = [];
  connection;
  message;

  constructor(private chatService:WebsocketService, private changeDetector:ChangeDetectorRef) {
  }

  sendMessage() {
    this.chatService.sendMessage(this.message);
    this.message = '';
  }

  ngOnInit() {
    this.connection = this.chatService.getMessages().subscribe(message => {
        this.messages.push(message);
        console.info(this.messages);
        this.changeDetector.markForCheck();
      },
      error => console.error(error),
      () => this.changeDetector.markForCheck()
    );

  }

  ngOnDestroy() {
    this.connection.unsubscribe();
  }
}

chatService.getMessages 返回一个Observable

【问题讨论】:

    标签: angular angular2-changedetection angular2-observables


    【解决方案1】:

    原来我在父组件中将changedetectionstrategy 设置为onPush。而且该消息没有文本字段,而是一个消息,因此即使强制更新也不会产生任何影响。如果有人遇到类似问题,请查找父组件的changedetectionstrategy

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-04-07
      • 2016-04-02
      • 1970-01-01
      • 1970-01-01
      • 2023-03-17
      • 2016-08-08
      • 1970-01-01
      • 2017-04-19
      相关资源
      最近更新 更多