如何在解析组件中的promise后使Angular 2呈现HTML模板?
对于我的应用程序,ItemDetailComponent将显示项目的信息.我有一个使用promise检索所有项目的服务.我使用ActivatedRoute从url路径检索项ID,然后运行服务,获取所有项,然后找到具有上面检索到的ID的项,并将其分配给selectedItem变量.
这是item-detail.component.ts: export class ItemDetailComponent implements OnInit { private title = 'Item Details' private selectedItem: object constructor( private route: ActivatedRoute,private itemService: ItemService ) {} ngOnInit() { const selectedItemId = this.route.snapshot.params.itemId return this.itemService.getAllItems() .then((items) => { return _.find(items,item => item.itemId === selectedItemId) }) .then((selectedItem) => { this.selectedItem = selectedItem console.log('Inside promise',this.selectedItem) }) console.log('Outside promise',this.selectedItem) } } 这里是item-detail.component.html模板,所以我可以显示我的项目,只是一个例子: <div> <h1>{{title}}</h1> <div *ngIf="selectedItem"> <div><label>Item ID: </label>{{selectedItem.itemId}}</div> </div> </div> 不幸的是,应用程序只返回标题.然后我添加了两个console.log()命令,发现在promise完成之前呈现了promise和html模板之外的那个,并且当时没有selectedItem可用.我怎么能强制应用程序只有在解析了promise后才能执行它们才能让selectedItem就位? 编辑:我在html模板中添加了一个新行来进一步检查: <div> <h1>{{title}}</h1> <div><label>Item ID 1: </label>{{selectedItem.itemId}}</div> <div *ngIf="selectedItem"> <div><label>Item ID 2: </label>{{selectedItem.itemId}}</div> </div> </div> 该应用程序显示“项目ID 1:”标签,但没有实际ID.控制台向我显示一条错误,指出“无法读取未定义的属性’itemId’,再次确认整个模板在promise解决之前呈现,并且在加载数据后不会重新呈现.太奇怪了. 解决方法
您可以为获取所需数据的路径创建解析器.
https://angular.io/api/router/Resolve https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |