使用以下路由定义:
export const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: GeneralComponent },
{ path: 'test', component: TestComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
我在作为“主页”加载序列的一部分加载的模块中设置了以下 for 循环:
<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>
这由后端的一个简单组件支持:
export class TeamListingComponent implements OnInit {
rows: Array<Array<Coach>>;
constructor(private service: CoachListingService) { }
ngOnInit () {
this.rows = this.service.get();
}
}
初始页面加载到 .../home 时,一切看起来都很好。
如果我导航到 .../test 然后返回到 .../home,for 循环似乎不会被触发。纯 HTML 内容加载正常,但 for 循环提供的内容不呈现。 (在 JS 控制台中没有报告错误)。
我已经确认“this.rows”已正确重置并在回程中包含内容,而且服务似乎按预期工作,组件中的非“for 循环”HTML 加载并显示完全一样预期。
版本:
*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
更新:
根据下面列出的建议使用 NgZone 模块的方法的评论,我查看了帖子和后续的 NgZone API 页面,并将以下内容添加到有问题的组件中:
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();
}
这似乎没有效果。我确定我没有正确考虑这一点。
我后来修改了“_updateList”来调用回调:
_updateList (doneCallback: () => void) {
this.rows = this.service.get();
doneCallback();
}
它确实在 javascript 控制台中显示了正确的输出。所以数据是存在的。
想法?
TIA
最佳答案
服务应该返回一个可观察对象,你应该在模板中使用异步管道。这将确保在值更改时更新 View 。 (注意:“$”后缀是我用于可观察对象的命名约定。)
export class TeamListingComponent implements OnInit {
rows$: Observable<Array<Array<Coach>>>;
constructor(private service: CoachListingService) { }
ngOnInit () {
this.rows$ = this.service.getRows$();
}
}
模板:
<div *ngFor="let row of rows$ | async; let i = index">
我不知道你的服务发生了什么,但如果它只是简单地获取和设置,你可以使用 rxjs Subject,像这样:
@Injectable()
export class CoachListingService {
private rowsSubject = new Subject<Array<Array<Coach>>>();
private _rows$ = this.rowsSubject.asObservable();
getRows$() {
return this._rows$;
}
setRows(rows: Array<Array<Coach>>) {
this.rowsSubject.next(rows);
}
}
你绝对不应该去搞乱 NgZone 之类的东西。
关于javascript - 你如何强制 ngFor 在路由器导航后重新运行? ( Angular 2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43966330/