Question

以下是我正在尝试根据Angular Tutorial进行工作的内容。

export class DashboardComponent implements OnInit {
      title = 'Current Robots';
      private sobots: Robot[];

      constructor(
        private router: Router,
        private sobotService: RobotService) { 
      }

      getRobots() { 
          this.sobotService.getRobots().then(sobots => Array.prototype.push.apply(this.sobots, sobots.data));     
      }

      ngOnInit() {
          this.getRobots();
      }

      gotoDetail(sobot: Robot) {
        let link = ['/detail', sobot.Id];
        this.router.navigate(link);
      }

和视图

<h3>{{title}}</h3>
<div class="grid grid-pad">        
  <div *ngFor="let sobot of sobots" (click)="gotoDetail(sobot)" class="col-1-4">
    <div class="module sobot">
      <p>HostKey</p>
      <h4>{{sobot.HostKey}}</h4>
    </div>
  </div>
</div>
<sobot-search></sobot-search>

sobots.data看起来正在按预期返回数据对象 - 但是在我点击任何按钮/路由/任何事件被触发之前它仍然没有更新。

控制台中没有出现任何错误，我很困惑！

我已经开始尝试确保它只是将数据添加到原始数组对象中，但即使这样也不起作用！

Answer 1

事实证明，sobotService正在返回q.js承诺，而不是ES6承诺。我相信这可能就是为什么它没有更新，因为我希望它能像英雄教程那样更新。

强制它在区域中更新，例如：

{{1}}

一旦承诺解决，它就设法更新了视图。

我可能要弄清楚是否有一种简单的方法可以从我正在使用的库（o.js）中删除q.js承诺，但同时这可以按预期工作！

Answer 2

尝试为this.sobots分配初始值。

export class DashboardComponent implements OnInit {
      title = 'Current Robots';
      private sobots: Robot[] = []; <---- this

      constructor(
        private router: Router,
        private sobotService: RobotService) { 
      }

      getRobots() { 
          this.sobotService.getRobots().then(sobots => Array.prototype.push.apply(this.sobots, sobots.data));     
      }

      ngOnInit() {
          this.getRobots();
      }

      gotoDetail(sobot: Robot) {
        let link = ['/detail', sobot.Id];
        this.router.navigate(link);
      }
}

否则你试图推送到一个null对象，我认为push.apply不会起作用。在nodejs中：

> let x
undefined
> x
undefined
> Array.prototype.push.apply(x,['y','z'])
TypeError: Array.prototype.push called on null or undefined
    at repl:1:22
    at REPLServer.defaultEval (repl.js:272:27)
    at bound (domain.js:280:14)
    at REPLServer.runBound [as eval] (domain.js:293:12)
    at REPLServer.<anonymous> (repl.js:441:10)
    at emitOne (events.js:96:13)
    at REPLServer.emit (events.js:188:7)
    at REPLServer.Interface._onLine (readline.js:224:10)
    at REPLServer.Interface._line (readline.js:566:8)
    at REPLServer.Interface._ttyWrite (readline.js:843:14)

Answer 3

这对我有帮助。

this.someService.captureDetails(data).subscribe((res) => {
  this.zone.run(() => { 
   this.data = res ;
    }
  });
});

Answer 4

当有一个异步代码（在Angular范围之外）修改State时，它不会触发View更新。点击即可完成。 NgZone服务可以解决此问题。

就像阿卜杜勒（Abdul）之前mentioned一样，代码应如下所示：

  this.ngZone.run(() => {
    this.myState = 'new value';
  });

但是，正如Madhur Bhaiya pointed out一样，它不够详细。

ngZone是NgZone服务的实例。由José Pedro Silva在GitHub Angular issues page提供的完整示例。

public constructor(private _ngZone: NgZone) {

}

public async update() {
  try {
    this.a = 1;
    let newBValue = await this.dataService.getAsync();

    this._ngZone.run(() => {
      this.b = newBValue;
      this.c = 2;
    });
  }
  catch (error) {
    // blah
  }

}

这对于AJAX调用很有帮助，但对于任何异步代码（例如外部库回调）也很有帮助（我就是这种情况）。

Answer 5

就我而言，问题是由应用组件中的 changeDetection: ChangeDetectionStrategy.OnPush 引起的。

从应用组件中删除了 changeDetection: ChangeDetectionStrategy.OnPush 并且它工作正常。

Angular 2在单击任何对象之前不会更新

5 个答案: