Question

并不是我不想更新视图，我只是不明白为什么它会在我预期的时候更新它（因为对象在NG之外更新）。

行。

我有这个简单的代码：

@Component({
  selector: 'my-app',
  template: `
    <div>
    <input type='button' value="Fill more" (click)="fillMore()"/>
     <ul>
         <li *ngFor="let item of Items ">
         {{item}}
         </li>
     </ul>
    </div>
  `,
})
export class App {

  Items:Array<number> = new Array<number>();

  constructor(private mySignalRService:MySignalRService) 
  {
   this.Items.push(...[1,2,3]); //initial values
  }

  fillMore()
  {
   this.mySignalRService.go(this.Items);
  }
}

正如您所看到的，我也在注入一项服务：

@Injectable()
export class MySignalRService
{
   makeDummyDb:Promise<Array<number>>()
   {
       return new Promise( (v,x)=> {
         setTimeout(function (){v([100,200,300]);},800);
       })
   }

   go(arr : Array<number>) : number
   {
     this.makeDummyDb().then((newValues)=>arr.push(...newValues)) ;
     return 5; //this method must return a number 
   }
}

现在 - 当我点击按钮（“填充更多”按钮）时，我执行查看附加项目，但是当我想到它时，它不是我想更新因为我认为makeDummyDb:Promise在角度区域之外（我可能在这里错了）

问题：

在角度区域外是否发生了数组更新？如何模拟真实的外部区域以使代码无效？（用于测试）

https://github.com/azure-iothub/device-management/blob/master/main.js#L74

Answer 1

如果你的想法是setTimeout或者Promise将在“区域外”，那不是它的工作原理; Angular 2劫持setTimeout和setInterval（据我所知，当使用TypeScript时，querySelector返回的是IE元素而不是HTMLElement，强制转换为访问“样式”之类的东西，尽管这不是与区域有关，只是指出在TS / Angular2中，有些东西可能会做一些不同的事情）。每次超时启动时，都会发生更改检测。据我所知，这就是为什么你的价值得到了设定，我所看到的一切都在区域内。你必须采取一些明确的措施来避免这种情况。

解决这个问题的小例子：

ngZone.runOutsideAngular(() =>
    Observable.interval(2500).subscribe(() => {
        // async operation
});

Angular 2更新查看何时不应该？

1 个答案: