在路由器导航后如何强制ngFor重新运行？ （Angular 2）

Question

使用以下路由定义：

2>nul

我在一个模块中进行了以下循环设置，该模块作为＆＃34; home＆＃34;的一部分加载。加载顺序：

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: GeneralComponent },
  { path: 'test', component: TestComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

这是由后端的一个简单组件支持的：

<div *ngFor="let row of rows; let i = index">
  <div class="rows">
    <div *ngFor="let coach of row">
      <bio [coach]='coach'></bio>
    </div>
  </div>
</div>

在初始页面加载到... / home时，一切看起来都很棒。

如果我导航到... / test然后回到... / home，for循环似乎没有被解雇。纯HTML内容加载正常，但来自for循环的提供内容不会呈现。 （JS控制台中没有报告错误。）

我已经确认＆＃34; this.rows＆＃34;正确地重置并且在回程中有内容，并且服务似乎按预期工作并且非＆＃34; for循环＆＃34;组件中的HTML加载并完全按预期显示。

版本：

export class TeamListingComponent implements OnInit {
  rows: Array<Array<Coach>>;

  constructor(private service: CoachListingService) { }

  ngOnInit () {
    this.rows = this.service.get();
  }
}

更新：

根据下面列出的评论建议使用NgZone模块的方法，我查看了帖子＆amp;随后的NgZone API页面和我将以下内容添加到相关组件中：

*ng --version*
angular-cli: 1.0.0-beta.24
node: 7.0.0
os: darwin x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/compiler-cli: 2.4.10

这似乎没有效果。我确定我没有正确地思考这个问题。

我后来改变了＃34; _updateList＆＃34;用以下方法调用回调：

constructor(private service: CoachListingService, private zone: NgZone) {
  this.zone.runOutsideAngular(() => {
    this._updateList(() => {
    console.log(this.rows);
      this.zone.run(() => { console.log('Forcing re-draw', this.rows); });
    });
  });
}

ngOnInit () {
  this.rows = this.service.get();
}


_updateList (doneCallback: () => void) {
  this.rows = this.service.get();
}

它确实在javascript控制台中显示了正确的输出。所以数据存在。

思想？

TIA

Answer 1

服务应该返回一个observable，你应该在模板中使用异步管道。这将确保在值更改时更新视图。 （注意：＆＃39; $＆＃39;后缀是我用于observables的命名约定。）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-12 col-md-4" style="border:solid 1 px black;">1</div>
  <div class="col-sm-12 col-md-4 col-md-push-4" style="border:solid 1 px black;">3</div>
  <div class="col-sm-12 col-md-4 col-md-pull-4" style="border:solid 1 px black;">2</div>
 </div>

模板：

export class TeamListingComponent implements OnInit {
  rows$: Observable<Array<Array<Coach>>>;

  constructor(private service: CoachListingService) { }

  ngOnInit () {
    this.rows$ = this.service.getRows$();
  }
}

我不知道你服务中发生了什么，但如果只是简单地进行设置，你可以使用rxjs主题，如下所示：

<div *ngFor="let row of rows$ | async; let i = index">

你绝对不应该弄乱NgZone等等。